@charset "UTF-8";

/* CSS Document
 * ==========================================================================
 * 版權所有 2019 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: Rain, Buzz $
 * $Date: 2019/04 $ 
 */
@font-face { font-family: "Roboto"; font-weight: normal; font-style: normal; src: url("../fonts/Roboto-Regular.eot"); src: url("../fonts/Roboto-Regular.woff2") format("woff2"); src: url("../fonts/Roboto-Regular.woff") format("woff"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; src: url("../fonts/Roboto-Bold.eot"); src: url("../fonts/Roboto-Bold.woff2") format("woff2"); src: url("../fonts/Roboto-Bold.woff") format("woff"); }
@font-face { font-family: "Roboto Thin"; font-weight: 100; font-style: normal; src: url("../fonts/Roboto-Thin.eot") format("eot"), url("../fonts/Roboto-Thin.woff") format("woff"); src: url("../fonts/Roboto-Thin.ttf") format("truetype"); src: url("../fonts/Roboto-Thin.svg#Roboto-Thin") format("svg"); }

/* reset */
html { font-size: 15px; }
body { width: 100%; font-size: 1rem; line-height: 2rem; font-family: "Roboto", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; overflow-x: hidden; /* -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -ms-overflow-style: scrollbar; */ }
html,
body { margin: 0; }
a { text-decoration: none; outline: none; }
a:visited,
a:hover,
a:focus,
a:active { text-decoration: none; }
*:focus,
*:active { outline: 0; }
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: normal; line-height: 2; }
label { font-weight: inherit; }
input,
button,
textarea,
select,
optgroup,
option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; }
textarea { resize: vertical; }
ol.reset,
ul.reset { margin: 0; padding: 0; list-style: none; }
input,
button,
textarea,
select { *font-size: 100%; }
code,
kbd,
samp,
tt { font-size: 100%; }
* { -webkit-box-sizing: border-box; box-sizing: border-box; }
*:after,
*::before { -webkit-box-sizing: border-box; box-sizing: border-box; }
input[type=date]::-webkit-inner-spin-button { visibility: hidden; }

/*===========  Gobal Setting ============= */

/* 文字編輯器 */
.text-edit { font-size: 16px; }
.text-edit img { max-width: 100%; height: auto !important; }
.text-edit iframe { max-width: 100%; }
.no-data { min-height: 300px; text-align: center; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-justify-content: center; -o-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-align-items: center; -o-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; }
.no-data .word { background: #ffa163; border-radius: 30px; color: #fff; padding: 5px 30px; display: inline-block; }

/* scroll-view */
.scroll-fade { opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade.scroll-view { opacity: 1; }
.scroll-fade-down { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-down.scroll-view { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
.scroll-fade-up { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-up.scroll-view { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
.scroll-fade-left { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-left.scroll-view { opacity: 1; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
.scroll-fade-right { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-right.scroll-view { opacity: 1; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
.scroll-rotateY { -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-rotateY.scroll-view { opacity: 1; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }
.scroll-img-scale { -moz-transform: scale(1.15, 1.15); -ms-transform: scale(1.15, 1.15); -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); -moz-transition: -moz-transform 1.5s 0.15s; -o-transition: -o-transform 1.5s 0.15s; -webkit-transition: -webkit-transform 1.5s; -webkit-transition-delay: 0.15s; transition: transform 1.5s 0.15s; }
.scroll-img-scale.scroll-view { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
.scroll-box-scale { -moz-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); opacity: 0; -moz-transition: -moz-transform 1s 0.15s; -o-transition: -o-transform 1s 0.15s; -webkit-transition: -webkit-transform 1s; -webkit-transition-delay: 0.15s; transition: transform 1s 0.15s; }
.scroll-box-scale.scroll-view { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
@-webkit-keyframes tracking-in-expand {
  0% { letter-spacing: -0.5em; opacity: 0; }
  40% { opacity: 0.6; }
  100% { opacity: 1; }
}
@keyframes tracking-in-expand {
  0% { letter-spacing: -0.5em; opacity: 0; }
  40% { opacity: 0.6; }
  100% { opacity: 1; }
}
.tracking-in-expand { opacity: 0; }
.tracking-in-expand.scroll-view { opacity: 1; -webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; }

/* Pace */

/* .pace { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: fixed; z-index: 1001; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.pace .pace-activity { position: relative; bottom: 0; left: 0; width: 100%; height: 100%; background: #000; display: block; }
.pace .pace-activity:before { content: "LOADING..."; display: block; color: #666; position: absolute; top: 50%; left: 50%; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-weight: bold; }
.pace .pace-activity:after { content: ""; top: 50%; left: 50%; margin-left: -1rem; width: 2rem; height: 2rem; border-radius: 50%; background: #aaa; position: absolute; animation: bounce 1s infinite; }
.pace.pace-inactive { opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: opacity 0.5s, -webkit-transform 0s; -webkit-transition-delay: 0.25s, 0.5s; -o-transition: opacity 0.5s 0.25s, -o-transform 0s 0.5s; -webkit-transition: opacity 0.5s 0.25s, -webkit-transform 0s 0.5s; transition: opacity 0.5s 0.25s, -webkit-transform 0s 0.5s; -o-transition: opacity 0.5s 0.25s, transform 0s 0.5s; transition: opacity 0.5s 0.25s, transform 0s 0.5s; transition: opacity 0.5s 0.25s, transform 0s 0.5s, -webkit-transform 0s 0.5s; }
.pace.pace-inactive .pace-activity { -webkit-animation: fadeOut 0.35s 0.0001s linear forwards; animation: fadeOut 0.35s 0.0001s linear forwards; } */
@keyframes bounce {
  0% { top: 30%; animation-timing-function: ease-in; }
  34% { height: 2rem; width: 2rem; }
  35% { top: 45%; height: 1rem; width: 2.3rem; animation-timing-function: ease-out; background: #fff; }
  45% { height: 2rem; width: 2rem; }
  90% { top: 30%; }
  100% { top: 30%; }
}

/* 共用架構 */
.g-wrap { min-height: calc(100vh - 250px); overflow: hidden; }

/* .pc .g-wrap { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } */

/* .pc.pace-done .g-wrap { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } */
.container-1500 { width: 1530px; margin: 0 auto; padding: 0 15px; }
.container-1400 { width: 1430px; margin: 0 auto; padding: 0 15px; }
@media only screen and (max-width:1680px) {
  .container-1500,
  .container-1400 { width: 100%; }
}

/* 共用標題 */
.h2 { font-size: 2.15rem; text-align: center; text-transform: uppercase; margin: 0 0 35px; white-space: nowrap; font-family: "Roboto", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;}
.h2:before { content: ""; display: block; width: 70px; height: 2px; background: #333; margin: 0 auto 30px; }
.h2 span { color: #333; font-weight: normal; }
@media only screen and (max-width:991px) {
  .h2 { font-size: 1.65rem; white-space: normal; margin-bottom: 15px; }
}

/* 共用滑過圖片 */
@media only screen and (min-width:992px) {
  .hover-box .pic { position: relative; }
  .hover-box .pic:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: #000; opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }
  .hover-box .pic:after { content: "+"; color: #666; line-height: 50px; font-size: 1.25rem; position: absolute; text-align: center; left: 50%; top: 50%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; border-radius: 50%; z-index: 2; background: #fff; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -o-transition: transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; }
  .hover-box:hover .pic:before { opacity: 0.1; }
  .hover-box:hover .pic:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}

/* 共用按鈕樣式 */
.g-btn { background: #222; color: #fff !important; font-size: 1rem; text-align: center; padding: 6px; display: block; margin: 15px auto; width: 160px; overflow: hidden; position: relative; }
@media only screen and (min-width:992px) {
  .g-btn:before,
  .g-btn:after { content: ""; position: absolute; left: -100px; top: 0; opacity: 0.3; width: 100px; height: 100%; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; *zoom: 1; background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFF', endColorstr='#FFFFFF', GradientType=0); }
  .g-btn:hover { background: #000; -webkit-box-shadow: inset 2px 1px 5px rgba(0, 0, 0, 0.15); box-shadow: inset 2px 1px 5px rgba(0, 0, 0, 0.15); -webkit-transition: background 0.5s 0.25s; -o-transition: background 0.5s 0.25s; transition: background 0.5s 0.25s; }
  .g-btn:hover:before { left: 150%; -webkit-transition: left 0.5s; -o-transition: left 0.5s; transition: left 0.5s; }
  .g-btn:hover:after { left: 150%; -webkit-transition: left 0.5s; -o-transition: left 0.5s; transition: left 0.5s; left: 50%; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }
}

@media only screen and (max-width: 640px) {
.g-btn{ padding: 3px; width: 120px; }
}

/* See More */
.see-more { opacity: 0; position: absolute; left: 50%; top: 50%; height: 44px; padding: 0 35px; line-height: 44px; color: #fff; text-align: center; border: 1px solid #fff; border-right: 0; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); margin: 25px auto 15px; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.see-more:before,
.see-more:after { content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #fff; }
.see-more:before { top: 0; }
.see-more:after { bottom: 0; }
.see-more span { display: inline-block; width: 30px; vertical-align: middle; margin-left: 5px; height: 1px; background: #fff; position: absolute; top: 50%; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.see-more span:after { content: ""; display: inline-block; vertical-align: middle;  /* margin-left: 5px; */ width: 8px; height: 8px; border-width: 1px 1px 0 0; border-color: #fff #fff transparent transparent; transform: rotate(45deg); border-style: solid; position: absolute; right: -4px; top: -3px; }
.see-more:hover { opacity: 1; }
.see-more:hover span { width: 40px; margin-left: 15px; }

/* Btn Back */
.btn-back span { position: relative; display: inline-block; width: 15px; vertical-align: top; }
.btn-back span:before,
.btn-back span:after { content: ""; position: absolute; display: block; background: #ffffff; width: 3px; height: 10px; left: 10px; top: 7px; transform: rotate(45deg); border-radius: 3px; transition: left 0.3s ease; -o-transition: left 0.3s ease; -moz-transition: left 0.3s ease; -webkit-transition: left 0.3s ease; }
.btn-back span:before,
.btn-back span:after { background: #fff; }
.btn-back span:last-child:before,
.btn-back span:last-child:after { background: #666; left: 3px; }
.btn-back span:after { transform: rotate(-45deg); top: 12px; }

/* Header */
#header { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; font-size: 0; height: 50px; text-align: center; }
#header:before { width: 100%; background: #5e0d8b; position: absolute; }
#header .logo { -webkit-transition: margin 0.35s; -o-transition: margin 0.35s; transition: margin 0.35s; margin: 0; display: inline-block; vertical-align: top; line-height: 50px; width: 11%; text-align: center; position: absolute; left: 30px; }
#header .logo a { display: inline-block; }
#header .logo a img { max-width: 100%; }
#header .right-box { font-size: 0; display: inline-block; position: absolute; right: 0; }
#header .right-box > a { display: inline-block; vertical-align: top; width: 50px; line-height: 50px; text-align: center; }
#header .right-box .btn-cart { background: #353535; color: #fff; font-size: 0.875rem; width: 63px; }
#header .right-box .btn-cart span { line-height: 40px; display: inline-block; vertical-align: bottom; padding-left: 5px; }
#header .right-box #hover-cart { display: none; font-size: 1rem; position: absolute; padding: 10px 15px; width: 375px; top: 100%; right: 0; background: #fff; border: 1px solid #ddd; }
#header .right-box #hover-cart ul { font-size: 0 }
#header .right-box #hover-cart ul> li:not(:last-child) { border-bottom: 1px solid #efefef }
#header .right-box #hover-cart ul> li>* { display: inline-block; vertical-align: middle; font-weight: bold }
#header .right-box #hover-cart ul> li> .pic { float: left; width: 65px; overflow: hidden; margin: 0 10px 5px 0; text-overflow: ellipsis; white-space: nowrap; height: 65px; font-size: 0.875rem; border: 1px solid #ddd; }
#header .right-box #hover-cart ul> li> .pic img { width: 100% }
#header .right-box #hover-cart ul> li> .txt-right { display: block; float: left; width: calc(100% - 85px); overflow: hidden; margin: 0 10px 5px 0; font-size: 0.875rem; text-align: left; }
#header .right-box #hover-cart ul> li> .title { width: calc(100% - 75px - 35px - 30px); text-align: left; color: #222; overflow: hidden; margin-right: 5px; line-height: 1.25; font-size: 0.875rem; line-height: 1.5; }
#header .right-box #hover-cart ul> li> .num { font-size: 0.875rem; color: #666; display: inline-block; width: 30px; line-height: 36px; text-align: center; }
#header .right-box #hover-cart ul> li> .qua { font-size: 0.875rem; display: inline-block; width: 30px; line-height: 36px; text-align: center; }
#header .right-box #hover-cart ul> li> .g-btn.yellow { color: #fff; }
#header .right-box #hover-cart ul> li> .g-btn.yellow svg { vertical-align: sub; margin-right: 5px; }
#header .right-box #hover-cart ul> li> .g-btn.yellow svg path { fill: #fff; }
#header .right-box #hover-cart ul> li> .txt-right> .title { color: #333; width: calc(100% - 30px); display: inline-block; }
#header .right-box #hover-cart ul> li> .txt-right> .gift { color: #888; display: block; width: 100%; }
#header .right-box .btn-notice { display: inline-block; vertical-align: top; width: 50px; line-height: 50px; text-align: center; background: #353535; color: #fff; font-size: 0.875rem; width: 63px; }
#header .right-box .btn-notice span { line-height: 40px; display: inline-block; vertical-align: bottom; padding-left: 5px; }
#header .right-box #notice-wrap { position: absolute; font-size: 1rem; top: 100%; width: 375px; right: -375px; height: calc(100vh - 50px); background: #fff; box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1); overflow: hidden; -webkit-transition: right 0.3s; -o-transition: right 0.3s; transition: right 0.3s; z-index: 100 }
#header .right-box #notice-wrap .notice-ti { background: #000; color: #fff; text-align: left; font-weight: bold; font-size: 1.125rem; line-height: 30px; padding: 10px 20px; }
#header .right-box #notice-wrap .notice-ti .back { float: right; cursor: pointer; border: 1px solid #ddd; padding: 0 10px; line-height: 28px; height: 30px; font-size: 0.8rem; text-align: center; display: inline-block; border-radius: 5px; color: #fff; }
#header .right-box #notice-wrap .notice-ti .back:before { content: '\f00d'; margin-right: 5px; line-height: 28px; font-family: "Font Awesome 5 Free"; }
#header .right-box #notice-wrap .read { font-size: 0.8rem; text-align: center; display: inline-block; border-radius: 5px; color: #fff; height: 20px; line-height: 20px; background: #45968f; cursor: pointer; padding: 0 10px; float: right; margin-top: 5px }
#header .right-box #notice-wrap ul { padding: 0px 0; position: relative; }
#header .right-box #notice-wrap ul> li { font-size: 0; padding: 15px 15px; /* position: relative; */ }
#header .right-box #notice-wrap ul> li:not(:last-child) { border-bottom: 1px solid #efefef; font-size: 0 }
#header .right-box #notice-wrap ul> li>* { display: inline-block; vertical-align: middle; font-weight: bold; font-size: 0.875rem; text-align: left; line-height: 1.25rem; max-height: 3.75rem; }
#header .right-box #notice-wrap ul> li> .icon-news,
#header .right-box #notice-wrap ul> li> .icon-order,
#header .right-box #notice-wrap ul> li> .icon-message { width: 40px; height: 40px; }
#header .right-box #notice-wrap ul> li> .icon-news:before,
#header .right-box #notice-wrap ul> li> .icon-order:before,
#header .right-box #notice-wrap ul> li> .icon-message:before { font-family: "Font Awesome 5 Free"; display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 40px; margin: 0 auto; background: #666; color: #fff; text-align: center; }
#header .right-box #notice-wrap ul> li> .icon-news:before { content: '\f1ea'; }
#header .right-box #notice-wrap ul> li> .icon-order:before { content: '\f07a'; }
#header .right-box #notice-wrap ul> li> .icon-message:before { content: '\f658'; }
#header .right-box #notice-wrap ul> li> .title { width: calc(100% - 40px - 65px); color: #666; overflow: hidden; padding: 0 10px; }
#header .right-box #notice-wrap ul> li> .title-new { width: calc(100% - 40px); color: #666; overflow: hidden; padding: 0 10px; }
#header .right-box #notice-wrap ul> li> .num { color: #666; width: 65px; text-align: right; padding: 0; }
#header .right-box #notice-wrap ul> li> .num:after { content: '\f054'; font-family: "Font Awesome 5 Free"; display: inline-block; width: 20px; line-height: 30px; border-radius: 30px; margin: 0 auto; text-align: center; }
#header .right-box #notice-wrap ul> li> .num span { border-radius: 20px; display: inline-block; background: #F44336; padding: 0 10px; color: #fff; font-weight: normal; font-size: 10px }
#header .right-box #notice-wrap ul> li> .num span.test { display: none; }
#header .right-box #notice-wrap ul> li> .date { display: block; width: 100%; color: #ccc; font-size: 0.8rem; padding: 0 0 0 50px; line-height: 1rem; height: 1rem; }
#header .right-box #notice-wrap ul> li> ul.list { position: absolute; z-index: 10; left: 375px; top: -50px; display: block; overflow: auto;  height: 100vh;  background: #f00; width: 100%; background: #fff; max-height: calc(100vh - 50px); -webkit-transition: left 0.3s; -o-transition: left 0.3s; transition: left 0.3s; }
#header .right-box #notice-wrap ul> li> ul.list> li { padding: 10px; }
#header .right-box #notice-wrap.open { right: 0; }
#header .right-box #notice-wrap ul> li> ul.list> li.top-title { width: 375px; height: 50px; top: 50px; right: -375px !important; padding: 10px 20px; background: #111; color: #fff; border: 0; -webkit-transition: right 0.3s; -o-transition: right 0.3s; transition: right 0.3s; z-index: 101 }
#header .right-box #notice-wrap ul> li> ul.list> li.top-title .back,
#header .right-box #notice-wrap ul> li> ul.list> li.top-title .center-ti,
#header .right-box #notice-wrap ul> li> ul.list> li.top-title .read { font-size: 0.8rem; text-align: center; display: inline-block; border-radius: 5px; color: #fff; height: 20px; line-height: 20px; }
#header .right-box #notice-wrap ul> li> ul.list> li.top-title .back { cursor: pointer; border: 1px solid #ddd; padding: 0 10px; line-height: 28px; height: 30px; }
#header .right-box #notice-wrap ul> li> ul.list> li.top-title .back:before { content: '\f104'; font-size: 1.1rem; margin-right: 5px; line-height: 28px; font-family: "Font Awesome 5 Free"; vertical-align: bottom; }
#header .right-box #notice-wrap ul> li> ul.list> li.top-title .center-ti { font-size: 1rem; border: 0; margin: 0 10px; }
#header .right-box #notice-wrap ul> li.open> ul.list { left: 0; }
#header .right-box #notice-wrap.open ul> li.open> ul.list li.top-title { right: 0 !important; }
#header .right-box #notice-wrap ul.newest { position: relative; height: calc(100vh - 50px - 212px - 100px); overflow-y: auto; }
#header .right-box #notice-wrap li.unread { background: #defffc; }
#header .right-box #notice-wrap .read-more { display: none; font-size: 1rem; width: 375px; height: 70px; line-height: 100px; text-align: center; position: absolute; bottom: 0; right: 0; background: rgb(255, 255, 255); background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 58%); background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 58%); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 58%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); }
#header .right-box #notice-wrap .read-more.open-view { display: block; }
#header .right-box #notice-wrap .no-data { min-height: 180px; }
@media only screen and (min-width:992px) {
  #header .switch { display: none; }
  #header .menu {opacity: 0; margin-left: 50px; width: auto; display: inline-block; vertical-align: top; -webkit-transition: margin-left 1.5s; transition: margin-left 1.5s; -o-transition: margin-left 1.5s; transition: margin-left 1.5s; transition: margin-left 1.5s;}
  #header .menu.scroll-view{ opacity: 1; margin-left: 0 }
  #header .menu > ul { height: 100%; font-size: 0; }
  #header .menu > ul > li { position: relative; text-align: center; width: 150px; border-right: 1px solid #e7e7e7; display: inline-block; }
  #header .menu > ul > li:last-child { border-right: 0; }
  #header .menu > ul > li > a { color: #000; position: relative; display: block; height: 50px; line-height: 50px; font-weight: bold; font-size: 1rem; -webkit-transition: color ease 1s; -o-transition: color ease 1s; transition: color ease 1s; }
  #header .menu > ul > li ul{ position: absolute; font-size: 1rem; top: 100%; left: 50%; width: auto; min-width: 120px; padding: 0; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); display: block !important; }
  #header .menu > ul > li.has-child ul li { white-space: nowrap; }
  #header .menu > ul > li.has-child ul li a { display: block; padding: 5px 20px; }
  #header .menu > ul > li.has-child ul li> a span { position: absolute; right: 6px; top: 15px; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 5px; border-color: transparent transparent transparent #000; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }
  #header .menu > ul > li.has-child:hover ul { opacity: 1; -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: opacity 0.35s, -webkit-transform 0s; transition: opacity 0.35s, -webkit-transform 0s; -o-transition: transform 0s, opacity 0.35s; transition: transform 0s, opacity 0.35s; transition: transform 0s, opacity 0.35s, -webkit-transform 0s; }
  #header .menu > ul > li.has-child ul li.has-child { position: relative }
  #header .menu > ul > li.has-child ul li.has-child ul { left: 100%; top: 0px; opacity: 0; -webkit-transform: translateX(0%) scale(0); -ms-transform: translateX(0%) scale(0); transform: translateX(0%) scale(0); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); display: block !important; }
  #header .menu > ul > li.has-child ul li.has-child:hover ul { opacity: 1; -webkit-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); transform: translateX(0%) scale(1); -webkit-transition: opacity 0.35s, -webkit-transform 0s; transition: opacity 0.35s, -webkit-transform 0s; -o-transition: transform 0s, opacity 0.35s; transition: transform 0s, opacity 0.35s; transition: transform 0s, opacity 0.35s, -webkit-transform 0s; }
  #header.scroll-view .menu > ul > li { border: 0; }
  #header .right-box #notice-wrap ul> li:hover> .title,
  #header .right-box #notice-wrap ul> li:hover> .title-new { color: #000 }
  #header .right-box #notice-wrap ul> li:hover> .icon-news:before { background: #ff5722 }
  #header .right-box #notice-wrap ul> li:hover> .icon-order:before { background: #009688 }
  #header .right-box #notice-wrap ul> li:hover> .icon-message:before { background: #ffc107 }
  #header .right-box #notice-wrap ul> li> ul.list> li.top-title .back:hover { background: #45968f; border: 1px solid #45968f; }
  #header .right-box #notice-wrap .notice-ti .back:hover { background: #45968f; border: 1px solid #45968f; }
  .cover { display: none !important; }
}
@media only screen and (max-width:1680px) {
  #header .menu > ul > li { width: auto; }
  #header .menu > ul > li > a { padding: 0 20px; }
}
@media only screen and (max-width:1366px) {
  #header .menu > ul > li { width: auto; }
  #header .menu > ul > li > a { padding: 0 30px; }
}
@media only screen and (max-width:1199px) {
  #header .menu > ul > li > a { padding: 0 25px; }
}
@media only screen and (max-width:991px) {
  #header { position: fixed; }
  #header .switch { right: 20px; }
  #header:before { display: none; }
  #header .logo { margin: 0; z-index: 99; width: 170px; }
  #header .logo:before { border-radius: 50%; -ms-transform: translate(-50%, -50%); }
  #header .menu { position: absolute; display: block; margin: 0; width: 300px; right: -300px; top: 50px; height: 100%; background: rgba(252, 252, 252); height: 100vh; -webkit-transition: right 0.5s ease; -o-transition: right 0.5s ease; transition: right 0.5s ease; overflow: hidden; }
  #header .menu > ul { display: none; width: 0; height: 100%; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }
  #header .menu > ul > li { /* position: relative; */ display: block; padding: 0; text-align: center; }
/* #header .menu > ul > li:nth-child(2){ display: none; } */
  #header .menu > ul > li > a { position: relative; padding: 15px 0; display: block; text-align: center; text-transform: uppercase; color: #000; font-size: 1.1rem; line-height: 1.2; position: relative; }
  #header .menu > ul > li a { border-bottom: 1px solid #efefef; }
  #header .menu > ul > li > a span { position: absolute; right: 20px; top: 50%; margin-top: -5px; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 5px; border-color: transparent transparent transparent #000; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }
  #header .menu > ul > li.on > a { color: #000; font-weight: 700; }

  /* 第二第三層 */
  #header .menu > ul > li ul li> .menu-back { font-size: 1rem; font-weight: bold; color: #000; width: 100%; height: 50px; line-height: 50px; background: #fff; border-bottom: 1px solid #efefef; cursor: pointer; }
  #header .menu > ul > li ul li> .menu-back:before { content: ''; display: inline-block; margin-right: 10px; border-style: solid; border-width: 4px 5px 4px 0; border-color: transparent #222 transparent transparent; }
  #header .menu > ul > li ul { position: absolute; width: 300px; right: -300px; top: 0; background: #fff; background: #fff; height: 100%; z-index: 1; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
  #header .menu > ul > li.on ul { opacity: 1; }
  #header .menu > ul > li ul li> a { position: relative; display: block; padding: 8px 0; font-size: 1.125rem; }
  #header .menu > ul > li ul li> a span { position: absolute; right: 20px; top: 50%; margin-top: -5px; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 5px; border-color: transparent transparent transparent #000;  !important; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }
  #header .menu > ul > li.open> a span { border-color: transparent transparent transparent #000 !important; }
  #header .menu > ul > li ul li ul li a { color: #666 }
  #header .menu > ul > li.open ul.open { right: 0 }
  #header .menu > ul > li.open ul li.open> a span { border-color: transparent transparent transparent #666 !important; }
  #header .menu.active { right: 0; }
  #header .menu.active > ul { display: block !important; opacity: 1; width: 300px; height: 100%; overflow-y: auto; }
  #header .right-box { position: absolute; right: 0px; top: 0px; padding-right: 50px; z-index: 98 }
  #header .switch { display: block; background: #000; border: none; position: absolute; top: 0px; right: 0px; width: 50px; height: 50px; padding: 0; color: #5e0d8b; z-index: 99 }
  #header .switch .icon { position: relative; width: 20px; height: 50px; display: inline-block; }
  #header .switch .icon i { display: block; width: 100%; height: 1px; background: #fff; position: absolute; top: 50%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }
  #header .switch .icon .linetop { margin-top: -7px; }
  #header .switch .icon .linebottom { margin-top: 7px; }
  #header .switch.on .icon .linetop { margin-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
  #header .switch.on .icon .linemiddle { width: 0; }
  #header .switch.on .icon .linebottom { margin-top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
  #header .right-box #notice-wrap.open ul> li.open> ul.list li.top-title { width: 100%; }
  #header .right-box #notice-wrap .read-more { width: 100%; }
}
@media only screen and (max-width:767px) {
  #header .right-box .btn-contact,
  #header .right-box .g-sidebar-search { background-size: auto 70%; margin-left: 0px; }
}
@media only screen and (max-width:639px) {
  #header .logo { width: 125px; }
  #header .right-box { padding-right: 40px; }
  #header .right-box > a { width: 40px; }
  #header .right-box .btn-notice,
  #header .right-box .btn-cart { width: 55px; }
  #header .right-box > a.btn-cart.hide-640 { display: none; }
  #header .right-box #notice-wrap { width: 100vw; right: -100vw; height: calc(100vh - 50px); }
  #header .right-box #notice-wrap ul> li> ul.list { width: 100%; left: 100%; }
  #header .switch { width: 40px; }
  #header .switch .icon { width: 16px; }
  #header .switch .icon .linetop { margin-top: -5px; }
  #header .switch .icon .linebottom { margin-top: 5px; }
  .cover { width: 100% !important }
}
@media only screen and (max-width:320px) {
  #header .logo { width: 120px; left: 10px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
  #header .right-box > a { width: 35px; }
}
@-webkit-keyframes textAni {
  0% { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }
  20% { -webkit-transform: scaleY(1.2); -ms-transform: scaleY(1.2); transform: scaleY(1.2); }
  40% { -webkit-transform: scaleY(0.2); -ms-transform: scaleY(0.2); transform: scaleY(0.2); }
  60% { -webkit-transform: scaleY(1.1); -ms-transform: scaleY(1.1); transform: scaleY(1.1); }
  80% { -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); }
  100% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes textAni {
  0% { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }
  20% { -webkit-transform: scaleY(1.2); -ms-transform: scaleY(1.2); transform: scaleY(1.2); }
  40% { -webkit-transform: scaleY(0.2); -ms-transform: scaleY(0.2); transform: scaleY(0.2); }
  60% { -webkit-transform: scaleY(1.1); -ms-transform: scaleY(1.1); transform: scaleY(1.1); }
  80% { -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); }
  100% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
}
@-webkit-keyframes ani_fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes ani_fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ani_fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes fadeDown {
  0% { opacity: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
  100% { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
}
@keyframes fadeDown {
  0% { opacity: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
  100% { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
}

/* Footer */
#footer { height: 135px; overflow: hidden; background: #222; color: #aaaaaa; padding: 35px 0; text-align: center; font-size: 0rem; }
#footer .f-logo { display: block; text-align: center; width: 150px; margin-bottom: 5px; }
#footer .f-logo img { margin: 0 auto; width: 150px; }
#footer .left,
#footer .right { padding: 0 15px; display: inline-block; width: 50%; vertical-align: middle; font-size: 0.9375rem; }
#footer .left { text-align: left; padding-left: 90px; }
#footer .right { text-align: right; padding-right: 90px; }
#footer .bold { font-weight: bold }
#footer .share-box .fb{ background: #3b5998; }
#footer .share-box .twitter{ background: #1da1f2; }
#footer .share-box .instagram{ background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); }
#footer .share-box .youtube{ background: #ff0000; }
@media only screen and (max-width:1199px) {
  #footer .left { padding-left: 50px; }
}
@media only screen and (max-width:991px) {
  #footer { height: auto; }
  #footer .f-logo { width: 100%; padding: 20px; }
  #footer .left,
  #footer .right { text-align: center; display: block; width: 100%; padding: 0 20px; font-size: 1rem; }
}
@media only screen and (max-width:767px) {
  #footer { padding: 45px 0 20px; line-height: 1.4;}
  #footer .f-logo { padding: 5px 0; }
  #footer .left { margin-bottom: 10px; }
}

/* Go Top */
.go-top { bottom: 165px; position: fixed; z-index: 990; width: 60px; height: 60px; border-radius: 60px; background: #4f4f4f; border: 1px solid #4f4f4f; right: 25px; color: #ddd; cursor: pointer; text-align: center; line-height: 60px; -webkit-transition: bottom 1s, -webkit-transform 1s; transition: bottom 1s, -webkit-transform 1s; -o-transition: bottom 1s, transform 1s; transition: bottom 1s, transform 1s; transition: bottom 1s, transform 1s, -webkit-transform 1s; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; }
.go-top span { position: relative; display: block; }
#wh-widget-send-button { z-index: 10 !important; }
#wh-widget-send-button.wh-widget-right { right: 0px !important; bottom: 120px !important; }
#easychat-floating-button { z-index: 10 !important; bottom: 70px !important; right: 15px !important; width: 50px !important; height: 50px !important; }
#easychat-floating-button img { width: 35px !important; height: 35px !important; margin: 8px auto !important; display: block !important; }
#easychat-chat-dialog { z-index: 999999999999; }
.fb_dialog_content>iframe { bottom: 95px !important; }
.fb_dialog_content svg{ width: 60px !important; height: 60px!important  }
.fb-customerchat.fb_invisible_flow.fb_iframe_widget iframe { bottom: 188px !important; }
@media only screen and (min-width:992px) {
  .go-top:hover span{ color: #fff; }
}
@media only screen and (max-width:767px) {
  .go-top { bottom: 127px; right: 15px; width: 50px; height: 50px; line-height: 50px; }
  .fb_dialog_content>iframe { right: -3px !important; bottom: 67px !important; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8);}
  .fb-customerchat.fb_invisible_flow.fb_iframe_widget iframe { bottom: 155px !important; }
  #wh-widget-send-button.wh-widget-right { bottom: 95px !important; right: -15px !important; }
  #easychat-floating-button { bottom: 55px !important; right: 5px !important; }
  #easychat-floating-button img { width: 30px !important; height: 30px !important; margin: 5px auto !important; display: block !important; }
}
/* sidebar */
.sidebar { position: fixed; width: 50px; height: 50px; bottom: 70px; right: 20px; -moz-transition: bottom 1s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: bottom 1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: bottom 1s cubic-bezier(0.7, 0, 0.3, 1); transition: bottom 1s cubic-bezier(0.7, 0, 0.3, 1); z-index: 991; }
.g-sidebar-btn { display: block; z-index: 9; margin-bottom: 8px; border: 1px solid #666; width: 50px; height: 50px; border-radius: 50px; cursor: pointer; font-size: 0; color: transparent; text-align: center; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.g-sidebar-btn.search { background: url("../images/icon_search.png") #fff center center no-repeat; }
.g-sidebar-btn.btn-massage { background: url("../images/icon_message.png") #555 center center no-repeat; }
.g-search-wrap { position: fixed; z-index: 999; bottom: 60px; right: 76px; padding: 14px 50px; background: rgba(0, 0, 0, 0.9); display: none; width: 400px; }
.g-search-wrap.is-open { display: block; -moz-animation: ani_fadeIn 0.5s both; -webkit-animation: ani_fadeIn 0.5s both; animation: ani_fadeIn 0.5s both; }
.g-search-wrap.is-close { -moz-animation: ani_fadeOut 0.5s both; -webkit-animation: ani_fadeOut 0.5s both; animation: ani_fadeOut 0.5s both; }
.g-search-wrap .btn-close-search { position: absolute; top: 0; right: 0; width: 50px; height: 50px; font-size: 0; background: #000; } po
.g-search-wrap .btn-close-search span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.g-search-wrap .btn-close-search span:before,
.g-search-wrap .btn-close-search span:after { content: ""; top: 50%; left: 25%; width: 50%; height: 2px; background: #fff; display: inline-block; position: absolute; }
.g-search-wrap .btn-close-search span:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.g-search-wrap .btn-close-search span:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.g-search-wrap .search-title { display: block; font-size: 3rem; color: #e2e2e2; font-weight: 600; }
.g-search-wrap .search-title .zh { font-size: 1.3rem; display: inline-block; vertical-align: baseline; margin-left: 10px; font-weight: 400; }
.g-search-wrap form { display: block; position: relative; width: 100%; }
.g-search-wrap .search-input { color: #fff; width: 100%; border: none; border-bottom: 2px solid #e2e2e2; height: 50px; padding: 0 50px 0 0; background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.g-search-wrap .search-input:focus { border-bottom-color: #fff; }
.g-search-wrap .search-btn { position: absolute; width: 45px; height: 45px; right: 0; top: 0; font-size: 0; border: none; background: #fff; border-radius: 50%; }
.g-search-wrap .search-btn span { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; background: url(../images/icon_search.png) center center no-repeat; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 43% auto; }
.g-search-wrap .search-btn:hover { background: #efefef; }
.g-overlay { position: fixed; z-index: 151; top: 0; right: 0; bottom: 0; left: 75px; background: rgba(0, 0, 0, 0.6); display: none; overflow-y: auto; }
.g-overlay.is-open { display: block; -moz-animation: ani_fadeIn 0.5s both; -webkit-animation: ani_fadeIn 0.5s both; animation: ani_fadeIn 0.5s both; }
.g-overlay.is-open .g-nav { -moz-animation: ani_nav_open 0.5s 0.3s both; -webkit-animation: ani_nav_open 0.5s 0.3s both; animation: ani_nav_open 0.5s 0.3s both; }
.g-overlay.is-close { -moz-animation: ani_fadeOut 0.5s 0.3s both; -webkit-animation: ani_fadeOut 0.5s 0.3s both; animation: ani_fadeOut 0.5s 0.3s both; }
.g-overlay.is-close .g-nav { -moz-animation: ani_nav_close 0.5s both; -webkit-animation: ani_nav_close 0.5s both; animation: ani_nav_close 0.5s both; }
@media only screen and (min-width:992px) {
  .g-sidebar-btn:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }
}
@media only screen and (max-width:991px) {
  .sidebar { width: 40px; height: 40px; right: 5px; bottom: 55px; }
  .g-search-wrap { padding: 90px 20px; }
  .g-sidebar-btn.search { width: 40px; height: 40px; }
  .g-sidebar-btn.btn-massage { width: 40px; height: 40px; background-size: 60% auto; }
}

/* Message Box */
.message-box { position: fixed; bottom: 0; right: 0px; width: 300px; z-index: 991; display: none !important; }
.message-box.open { display: block !important; }
.message-box .open-btn { display: block; height: 43px; line-height: 43px; font-weight: bold; text-align: center; position: relative; color: #fff; border: 1px solid #434343; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.15); background-color: #e0e0e0; background: -webkit-linear-gradient(-90deg, #e0e0e0 0%, #f5f5f5 100%); background: -moz-linear-gradient(-90deg, #e0e0e0 0%, #f5f5f5 100%); background: -webkit-linear-gradient(-90deg, #333333 0%, #131313 100%); font-size: 0.938rem; border-top-right-radius: 5px; border-top-left-radius: 5px; }
.message-box .open-btn .fa { display: none; }
.message-box .open-btn .fab { font-size: 1.65rem; display: inline-block; vertical-align: middle; margin-right: 10px; color: #318dff; }
.message-box.open .open-btn .fa { display: block; position: absolute; right: 0; top: 0; font-size: 1.25rem; }

/* Breadcrumb */
.g-breadcrumb { display: block; margin: 40px 0 5px 0; padding: 0; list-style: none; text-align: left; color: #1f1f1f; position: relative; line-height: 1.3; }
.g-breadcrumb li { display: inline-block; vertical-align: top; padding-left: 30px; font-size: 0.9375rem; position: relative; text-transform: capitalize}
.g-breadcrumb li:first-child { padding-left: 0; }
.g-breadcrumb li a { display: block; color: #999; font-size: 0.875rem; }
.g-breadcrumb li a:hover { color: #444; text-decoration: underline; }
.g-breadcrumb li:before { content: ""; display: inline-block; width: 6px; height: 6px; position: absolute; top: 50%; left: 10px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-style: solid; border-color: #999; border-width: 1px 1px 0 0; margin-top: -4px; }
.g-breadcrumb li:first-child { padding-left: 0; }
.g-breadcrumb li:first-child:before { display: none; }
.g-breadcrumb li:last-child { color: #000; }
@media (max-width:1199px) {
  .g-breadcrumb { margin: 20px auto 30px auto; }
}
@media (max-width:991px) {
  .g-breadcrumb { padding-left: 5px; }
  .g-breadcrumb:before { width: 20px; height: 20px; }
  .g-breadcrumb li { font-size: 0.875rem; color: #888; padding-left: 18px; }
  .g-breadcrumb li:first-child { padding-left: 0; }
  .g-breadcrumb li:before { left: 5px; }
}
@media (max-width:767px) {
  .g-breadcrumb { margin: 10px auto 20px auto; }
  .g-breadcrumb li { font-size: 0.75rem; }
  .g-breadcrumb li:first-child { padding-left: 0; }
}

/*=====================  Index  ========================== */
@-webkit-keyframes drawLine {
  0% { opacity: 1; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
  25% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0.6); -ms-transform: scale(1, 0.6); transform: scale(1, 0.6); }
  50% { -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0.7); -ms-transform: scale(1, 0.7); transform: scale(1, 0.7); }
  75% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
  100% { opacity: 0; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
}
@keyframes drawLine {
  0% { opacity: 1; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
  25% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0.6); -ms-transform: scale(1, 0.6); transform: scale(1, 0.6); }
  50% { -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0.7); -ms-transform: scale(1, 0.7); transform: scale(1, 0.7); }
  75% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
  100% { opacity: 0; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
}

/* Banner */
#index .banner { position: relative; overflow: hidden; max-width: 1920px; margin: 0 auto }
#index .banner .banner-slick { position: relative; -webkit-clip-path: url(#clipping); clip-path: url(#clipping); background: #ddd; }
#index .banner .banner-slick .item { position: relative; width: 100%; overflow: hidden; vertical-align: top; }
#index .banner .banner-slick a { vertical-align: top }
#index .banner .banner-slick .item img { width: 100%; /* -webkit-transition: -webkit-transform cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition-delay: 2s; -o-transition: -o-transform cubic-bezier(0.7, 0, 0.3, 1) 2s; -webkit-transition: -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 2s; transition: -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 2s; -o-transition: transform cubic-bezier(0.7, 0, 0.3, 1) 2s; transition: transform cubic-bezier(0.7, 0, 0.3, 1) 2s; transition: transform cubic-bezier(0.7, 0, 0.3, 1) 2s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 2s; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);  */ }
#index .banner .scroll-down { position: absolute; width: 1px; height: 65px; bottom: 0; text-align: center; color: #fff; display: block; background: #666666; left: 50%; overflow: hidden; }
#index .banner .scroll-down:after { content: ""; width: 1px; height: 65px; bottom: 0; background: #ffffff; display: block; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-animation: drawLine 2s linear infinite; animation: drawLine 2s linear infinite; }
@media only screen and (max-width:1199px) {
  #index .banner .banner-slick .item .text { width: 50%; font-size: 3.125rem; left: 8%; }
  #index .banner .scroll-down { height: 35px; }
  #index .banner .scroll-down:after { height: 35px; }
  #index .banner .slick-dots { bottom: 50px; }
}
@media only screen and (max-width:991px) {
  #index .banner { padding-top: 50px; }
}
@media only screen and (max-width:767px) {
  #index .banner .banner-slick .slick-slide .item.in .text { left: 10%; width: calc(80% - 20%); }
  #index .banner .scroll-down { height: 15px; }
  #index .banner .scroll-down:after { height: 15px; }
  #index .banner .slick-dots { bottom: 20px; }
}
@media only screen and (max-width:640px) {
  #index .banner .banner-slick .slick-slide .item.in .text { width: calc(100% - 20%); }
}

/* .i-Product */
.i-pro-wrap { padding: 40px 0px; }
@media only screen and (max-width:767px) {
  .i-pro-wrap { padding: 20px 0px; }
}
/*.i-news-wrap */
#index .i-news-wrap { padding: 3% 6%; position: relative; max-width: 1920px; margin: 0 auto }
#index .i-news-wrap .h2 a { color: #333 }
#index .i-news-wrap:after { content: ""; display: inline-block; position: absolute; height: calc(50% + 26px); top: 0; left: 0; width: 1920px; z-index: -1; position: absolute; background: #f1f1f1; }
#index .i-news-wrap .slider { position: relative; margin: auto; padding-bottom: 50px; z-index: 0; }
#index .i-news-wrap .slider .item { width: calc(100%/3); position: relative; background: #fff; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#index .i-news-wrap .slider .item:after { content: ""; }
#index .i-news-wrap .slider .item .pic { position: relative; display: block; overflow: hidden; }
#index .i-news-wrap .slider .item .pic .category { position: absolute; left: 0; top: 0; font-size: 0.9375rem; letter-spacing: 1px; padding: 0 10px; color: #efefef; background: rgba(0, 0, 0, 0.5) }
#index .i-news-wrap .slider .item .pic img { width: 100%; -moz-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1); }
#index .i-news-wrap .slider .item .txt { display: block; padding: 50px 30px; overflow: hidden; }
#index .i-news-wrap .slider .item .txt .h3 { position: relative; color: #333; padding: 20px 0 0 15px; font-size: 1.375rem; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; margin: 0; z-index: 1; overflow: hidden; }
#index .i-news-wrap .slider .item .txt .h3:before { content: ""; width: 72px; height: 75px; display: block; z-index: -1; background: #f1f1f1; position: absolute; left: 0; top: 0; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#index .i-news-wrap .slider .item .txt .date { padding-left: 15px; font-size: 0.8125rem; color: #858585; position: relative; z-index: 2; }
#index .i-news-wrap .slider .item .txt .des { color: #555; line-height: 1.6rem; height: 4.8rem; overflow: hidden; font-size: 0.9375rem; overflow: hidden; margin-top: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#index .i-news-wrap .slider .slick-arrow { top: auto; bottom: 0; }
#index .i-news-wrap .slider .slick-prev.slick-arrow { left: calc(100%/3); }
#index .i-news-wrap .slider .slick-next.slick-arrow { right: calc(100%/3); }
#index .i-news-wrap .slider .slick-dots { display: none !important; }
#index .i-news-wrap .slider + .page-box { margin: 0 auto; width: calc(100%/3); position: relative; line-height: 23px; font-size: 1.125rem; text-align: center; margin-top: -35px; z-index: 1; }
#index .i-news-wrap .slider + .page-box span { position: absolute; display: inline-block; font-size: 0.875rem; font-weight: bold; width: 25px; height: 25px; line-height: 25px; cursor: pointer; vertical-align: middle; color: #666; margin: 0 auto; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
#index .i-news-wrap .slider + .page-box span.current { color: #000; left: 35px; }
#index .i-news-wrap .slider + .page-box span.all { right: 35px; }
#index .i-news-wrap .progress { display: block; width: calc(100%/3 - 130px); height: 1px; overflow: hidden; background-color: #d4d4d4; background-image: linear-gradient(to right, #000000, #000000); background-repeat: no-repeat; background-size: 0 100%; transition: background-size 0.4s ease-in-out; margin: 14px auto; }
@media only screen and (min-width:991px) {
  #index .i-news-wrap .slider .item:hover { background: #222222; }
  #index .i-news-wrap .slider .item:hover .pic img { opacity: 0.3 !important; }
  #index .i-news-wrap .slider .item:hover .txt { color: #fff; }
  #index .i-news-wrap .slider .item:hover .txt .h3 { color: #fff; }
  #index .i-news-wrap .slider .item:hover .txt .h3:before { background: #323232; }
  #index .i-news-wrap .slider .item:hover .txt .des { color: #fff; }
  #index .i-news-wrap .slider .item:hover .see-more { opacity: 1; }
  #index .i-news-wrap .slider .item:hover .see-more span { width: 40px; margin-left: 15px; }
  #index .i-news-wrap .slider .slick-prev.slick-arrow:hover:before { left: calc(100%/3 + 5px); }
  #index .i-news-wrap .slider .slick-next.slick-arrow:hover:before { right: calc(100%/3 + 5px); }
}
@media only screen and (max-width:1680px) {
  #index .i-news-wrap .slider .item .txt { padding: 20px; }
}
@media only screen and (max-width:1199px) {
  #index .i-news-wrap .slider .item .txt .des { -webkit-line-clamp: 2; height: 3.2rem }
}
@media only screen and (max-width:991px) {
  #index .i-news-wrap { padding: 30px 15px; }
  #index .i-news-wrap:after { height: calc(50% + 13px); }
  #index .i-news-wrap .slider .item .txt .des { -webkit-line-clamp: 3; height: 4.8rem; margin-top: 5px }
}
@media only screen and (max-width:767px) {
  #index .i-news-wrap .slider .item { width: 100% !important; top: 0 !important; }
  #index .i-news-wrap .slider .item img { width: 100%; }
  #index .i-news-wrap .slider .item .txt { /* padding: 10px; */ }
  #index .i-news-wrap .slider .item .txt .des { margin-top: 5px; }
  #index .i-news-wrap .progress { width: calc(100% - 130px); }
  #index .i-news-wrap .slider .slick-prev.slick-arrow { left: 0; }
  #index .i-news-wrap .slider .slick-next.slick-arrow { right: 0; }
  #index .i-news-wrap .slider + .page-box { width: 100%; }
}
@media only screen and (max-width:565px) {
  #index .i-news-wrap .slider .item .txt { padding: 30px; }
  #index .i-news-wrap .slider .item .txt .h3 { font-size: 1.25rem; text-overflow: initial; white-space: initial; overflow: visible; }
  #index .i-news-wrap .slider .item .txt .des { -webkit-line-clamp: 3; height: 4.8rem margin-top:20px }
  #index .i-news-wrap .h2 a { font-size: 1.35rem; }
}

/* i-bottom */
.i-bottom-wrap { font-size: 0; position: relative; margin: 30px auto 60px; }
.i-bottom-wrap .img-box { font-size: 1rem; padding: 8%; width: calc(50% + 6%); display: inline-block; background-size: cover; background-repeat: no-repeat; }
.i-bottom-wrap .img-box:first-child { margin-right: -6%; background-image: url("../images/i_bottom_pic_1.png"); }
.i-bottom-wrap .img-box:last-child { margin-left: -6%; background-image: url("../images/i_bottom_pic_2.png"); }
.i-bottom-wrap .img-box .h2 { color: #fff; margin-bottom: 0; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); }
.i-bottom-wrap .img-box .h2 span { color: #fff; }
.i-bottom-wrap .img-box .btn-more { position: relative; display: block; width: 70px; margin: 0 auto; color: #fff; line-height: 25px; text-align: center; }
.i-bottom-wrap .img-box .btn-more:after { content: ""; width: 70px; height: 3px; display: block; background: #fff; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
.i-bottom-wrap .img-box .btn-more:before { content: ""; position: absolute; bottom: 0; left: 0; width: 70px; height: 3px; display: block; background: #60a511; transition: width 0.3s ease; -o-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -webkit-transition: width 0.3s ease; width: 0; }
@media only screen and (min-width:992px) {
  .i-bottom-wrap .img-box:hover .btn-more:after { width: 0; }
  .i-bottom-wrap .img-box:hover .btn-more:before { width: 70px; }
}
@media only screen and (max-width:1199px) {
  .i-bottom-wrap .img-box { padding: 7%; }
}
@media only screen and (max-width:991px) {
  .i-bottom-wrap .img-box { padding: 9%; }
}
@media only screen and (max-width:767px) {
  .i-bottom-wrap .img-box { padding: 6%; }
}
@media only screen and (max-width:640px) {
  .i-bottom-wrap .img-box { padding: 5%; }
  .i-bottom-wrap .img-box .h2 { font-size: 1.625rem; }
}
@media only screen and (max-width:480px) {
  .i-bottom-wrap .img-box { padding: 8%; }
  .i-bottom-wrap .img-box .h2 { font-size: 1.125rem; }
  .i-bottom-wrap .img-box .btn-more { display: none; }
}

/* ============= Page ========== */
.nodata-msg { text-align: center; margin: 30px auto; }
.nodata-msg .icon { display: inline-block; width: 80px; height: 80px; position: relative; border-radius: 50%; border: 2px solid #afafaf; -webkit-transition: -webkit-transform 0.35s, opacity 0.35s; -moz-transition: -moz-transform 0.35s, opacity 0.35s; -o-transition: -o-transform 0.35s, opacity 0.35s; transition: transform 0.35s, opacity 0.35s; opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }
.nodata-msg .icon i { position: absolute; top: 50%; left: 50%; font-size: 2.25rem; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #8c8c8c; }
.nodata-msg .title { display: block; font-size: 1.5rem; margin: 15px auto 0 auto; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; -moz-transition: -moz-transform 0.5s, opacity 0.5s; -o-transition: -o-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; opacity: 0; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); }
.nodata-msg .btn { display: block; opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }
.nodata-msg .btn a { display: block; margin: 10px auto; font-size: 1rem; width: 100%; max-width: 150px; text-align: center; text-decoration: underline; border-radius: 25px; color: #5b5b5b; }
.nodata-msg .btn a:hover { text-decoration: none; }
.nodata-msg.scroll-view .icon { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.nodata-msg.scroll-view .title { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
.nodata-msg.scroll-view .btn { opacity: 1; }
@media (max-width:767px) {
  .nodata-msg .icon { width: 60px; height: 60px; }
  .nodata-msg .icon i { font-size: 1.9rem; }
  .nodata-msg .title { font-size: 1.3rem; }
}

/* Share Box */
.share-box { display: inline-block; text-align: right; color: #858c99; font-size: 0.9rem; }
.share-box> a,
.share-box .copy-url { display: inline-block; margin: 0 0 0 6px; border-radius: 100%; width: 35px; height: 35px; overflow: hidden; text-align: center; line-height: 35px; vertical-align: middle; background: #222; color: #d5d5d5; cursor: pointer }
.share-box>a i { color: #f6f6f6; font-size: 1rem; }
.share-box>a svg { vertical-align: middle; fill: #d5d5d5 }
.share-box> a:hover i,
.share-box .copy-url:hover { color: #fff; }
.share-box> a:hover svg { fill: #fff; }

/* Btn Back */
.btn-back span { position: relative; display: inline-block; width: 15px; vertical-align: top; }
.btn-back span:before,
.btn-back span:after { content: ''; position: absolute; display: block; background: #ffffff; width: 3px; height: 10px; left: 10px; top: 7px; transform: rotate(45deg); border-radius: 3px; transition: left .3s ease; -o-transition: left .3s ease; -moz-transition: left .3s ease; -webkit-transition: left .3s ease; }
.btn-back span:before,
.btn-back span:after { background: #fff }
.btn-back span:last-child:before,
.btn-back span:last-child:after { background: #666; left: 3px; }
.btn-back span:after { transform: rotate(-45deg); top: 12px; }

/* Page Pager */
.p-pager { font-size: 0; text-align: center; margin: 6% 0; }
.p-pager a { display: inline-block; position: relative; width: 36px; line-height: 34px; vertical-align: top; }
.p-pager a.num { line-height: 50px; font-size: 0.9375rem; color: #777; }
.p-pager a.num:hover,
.p-pager a.num.current { color: #222; }

.p-pager a.first { font-size: 0.8375rem; height: 50px; width: 50px; border: 0; border-radius: 50px; margin-right: 12px; background: #e8e8e8; }
.p-pager a.first:not(.disabled):hover { background: rgba(237, 237, 237, 1); background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 237, 237, 1)), color-stop(100%, rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -o-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0); }
.p-pager a.first:before {content: ''; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: block; position: absolute; top: 8px; left: 12px; color: #666; /*  width: 8px; height: 8px; border-left: 1px solid #888; border-bottom: 1px solid #888;  transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); */ }
.p-pager a.first:not(.disabled):hover:before { border-color: #555; }
.p-pager a.last { font-size: 0.8375rem; height: 50px; width: 50px; border: 0; border-radius: 50px; margin-left: 12px; background: #e8e8e8; }
.p-pager a.last:not(.disabled):hover { border-color: #999; background: #e8e8e8; }
.p-pager a.last:before { content: ''; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: block; position: absolute;  top: 8px; right: 12px; color: #666; /* width: 8px; height: 8px; border-top: 1px solid #888; border-right: 1px solid #888;transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); */ }
.p-pager a.last:not(.disabled):hover:before { border-color: #555; }
.p-pager a.first.disabled,
.p-pager a.last.disabled { opacity: .5; cursor: not-allowed; }
.p-pager .sr-only { top: 9px; font-size: 0.875rem; overflow: visible; clip: unset; color: #222; font-weight: bold; }
.p-pager a.first .sr-only { right: 18px; }
.p-pager a.last .sr-only { right: 0; left: -8px; }
.p-pager a.prev,
.p-pager a.next{ width: 60px; height: 50px; margin: 0 10px; color: #777; }
.p-pager a.prev:hover,
.p-pager a.next:hover{ color: #777; }
.p-pager a.prev .sr-only,
.p-pager a.next .sr-only{ position: relative; }
#about { padding-top: 80px; background: #f1f1f1; }
#about .about-wrap { margin-bottom: 50px; background: #fff; padding: 50px 6% 80px 80px; font-size: 0; }
#about .h2 span { display: block }
#about .h2 span.en { font-size: 3rem; letter-spacing: 3px; font-family: "Roboto Thin"; margin-bottom: 10px; }
#about  .h2 span.ch { font-size: 1.875rem; letter-spacing: 6px; font-weight: bold; }
@media (max-width:640px) {
  #about .about-wrap { padding: 30px 6%; margin-top: 80px; }
  .p-pager a.first .sr-only,
.p-pager a.last .sr-only { font-size: 0;}
.p-pager a.first,
.p-pager a.last { margin: 0 5px;width: 40px; height: 40px;}
.p-pager a.prev, .p-pager a.next{ font-size: 0.7rem; width: 40px; margin: 0; }
.p-pager a.first:before{ left: 14px; top: 5px; }
.p-pager a.last:before{ right: 14px; top: 5px;}
}

/*=====================  News  ========================== */
.p-ban { position: relative; margin: 0 auto 50px; }
.p-ban .text { position: absolute; left: 50%; top: 40%; z-index: 5; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.p-ban .title { display: block; font-size: 2.0625rem; color: #fff; margin: 0 auto 10px auto; padding: 0; font-weight: 600; text-transform: uppercase; }
.p-ban .desc { display: block; font-size: 1.375rem; color: #cccccc; }
.p-ban .img { position: relative; z-index: 4; overflow: hidden; }
.p-ban .img:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background: rgba(0, 0, 0, 0.3); }
.p-ban .img div { z-index: 2; width: 100%; height: 0; padding-bottom: 23.76%; position: relative; overflow: hidden; }
.p-ban .img div img { max-width: none; height: 100%; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media (max-width:1399px) {
  .p-ban .text { bottom: 20px; }
  .p-ban .title { font-size: 2.6rem; }
  .p-ban .desc { font-size: 1rem; letter-spacing: 0.005rem; }
}
@media (max-width:991px) {
  .p-ban .title { font-size: 2.25rem; margin-bottom: 5px; }
  .p-ban .img div { padding-bottom: 45%; }
}
@media (max-width:499px) {
  .p-ban .title { font-size: 1.25rem; margin-bottom: 0; }
  .p-ban .desc { font-size: 0.75rem; line-height: 1.3; }
}

/* Tab */
.tab-wrap { margin: 40px auto; }
.tab-wrap .tab { display: inline-block; font-size: 0; padding: 0; vertical-align: middle; text-align: center; }
.tab-wrap .tab > li { display: inline-block; padding: 0; margin: 0 20px 10px 0; vertical-align: top; font-size: 1rem; }
.tab-wrap .tab > li a { position: relative; display: block; transition: all 0.3s ease; z-index: 1; color: #999; text-align: center; border: 1px solid #d7d7d7; margin-left: -1px; border-radius: 30px; min-width: 180px; height: 50px; padding: 0 10px; line-height: 50px; background: #d7d7d7; font-size: 1rem; }
.tab-wrap .tab > li a.current { color: #3c3c3c; background: #ffffff; box-shadow: 0 0 black; }
.tab-wrap .tab > li a.current:hover { background: #333; }
.tab-wrap .tab > li a:hover { background: #2e2e2e; color: #fff; }
@media (min-width:992px) {
  .tab-wrap .tab { display: block !important; }
  .tab-wrap .toggle { display: none !important; }
}
@media (max-width:1299px) {
  .tab-wrap .tab > li { margin-right: 15px; }
  .tab-wrap .tab > li a { min-width: 150px; }
}
@media (max-width:991px) {
  .tab-wrap { position: relative; margin: 0 auto 20px auto; }
  .tab-wrap .toggle { display: block !important; width: 60%; text-align: center; position: relative; background: #666; transition: all 0.3s ease; color: #fff; z-index: 10; font-size: 1rem; margin: 0 auto; vertical-align: middle; cursor: pointer; padding: 0 31px; height: 50px; line-height: 50px; border-radius: 50px; letter-spacing: 3px; }
  .tab-wrap .toggle i { margin-left: 5px; }
  .tab-wrap .tab { width: 100%; display: none; z-index: 10; margin: 7px auto; position: absolute; left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 25px; background: #fff; overflow: hidden; border: 1px solid #a28d60; }
  .tab-wrap .tab > li { display: block; margin: 0; border-top: 1px solid #a28d60; }
  .tab-wrap .tab > li:first-child { border-top: none; }
  .tab-wrap .tab > li a { margin-left: 0; display: block; width: 100%; border-radius: 0; background: none; border: none; }
  .tab-wrap .tab > li a:hover { background: #eee; color: #222; }
}
#news .p-pager{ margin: 20px 0 }

#news { background: #f1f1f1; padding-bottom: 3% }
#news .search-wrap { width: 200px; position: absolute; right: calc((100vw - 1400px)/2);}
#news .search-wrap .search-title { display: block; font-size: 3rem; color: #e2e2e2; font-weight: 600; }
#news .search-wrap .search-title .zh { font-size: 1.3rem; display: inline-block; vertical-align: baseline; margin-left: 10px; font-weight: 400; }
#news .search-wrap form { display: block; position: relative; width: 100%; }
#news .search-wrap .search-input { color: #000; width: 100%; border: none; border-bottom: 2px solid #e2e2e2; height: 50px; padding: 0 40px 0 0; background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#news .search-wrap .search-input:focus { border-bottom-color: #45968f; }
#news .search-wrap .search-btn { position: absolute; padding: 0; width: 40px; height: 40px; right: 0; top: 0; font-size: 0; border: none; background-color: #fff; border-radius: 50%; -webkit-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; }
#news .search-wrap .search-btn span { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; background-image: url(../images/icon_search.png); background-position: center center; background-repeat: no-repeat; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 43% auto; -webkit-transition: background-image 0.3s; -o-transition: background-image 0.3s; transition: background-image 0.3s;   }
#news .search-wrap .search-btn:hover { background-color: #000; }
#news .search-wrap .search-btn:hover span{ background-image: url('../images/icon_search_white.png'); background-size: 60% 60%}
#news .h2 span { display: block; }
#news .h2 span.en { font-size: 2.5rem; letter-spacing: 3px; font-family: "Roboto Thin"; margin-bottom: 10px; }
#news .h2 span.ch { font-size: 1.65rem; letter-spacing: 6px; font-weight: bold; }
#news .h2:before { display: none; }
#news .see-more { opacity: 1; color: #aaaaaa; border-color: #aaaaaa; top: auto; position: relative; height: 40px; display: inline-block; }
#news .see-more span,
#news .see-more:before,
#news .see-more:after { background: #aaaaaa; }
#news .see-more span { width: 40px; margin-left: 15px; }
#news .see-more span:after { border-color: #aaaaaa #aaaaaa transparent transparent; }
#news .see-more:hover span { width: 50px; }
#news .top-news { font-size: 1rem; background: #fff; }
#news .top-news.scroll-view { -moz-animation: ani_fadeInUp 0.8s both; -webkit-animation: ani_fadeInUp 0.8s both; animation: ani_fadeInUp 0.8s both; -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; animation-delay: 0.05s; opacity: 1; }
#news .top-news .big-ti { font-size: 5rem; color: rgba(162, 141, 96, 0.8); font-weight: bold; position: absolute; right: 10%; top: -74px; z-index: 0; }
#news .top-news .big-ti.scroll-view { -moz-animation: ani_fadeInDown 1s both; -webkit-animation: ani_fadeInDown 1s both; animation: ani_fadeInDown 1s both; -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; animation-delay: 0.05s; opacity: 1; }
#news .date { display: inline-block; margin: 0 7px 5px 0; font-size: 0.875rem; color: #888; }
#news .date:before { display: inline-block; margin-right: 10px; vertical-align: middle; }
#news .view { font-size: 0.875rem; margin: 0 7px 5px 0; color: #a0a0a0; display: inline-block; }
#news .view.hot{ color: #FF5722; }
#news .view:before{ content: ""; display: inline-block; margin-right: 2.5px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900;  }
#news .message { font-size: 0.875rem; margin-bottom: 5px; color: #45968f; display: inline-block; }
#news .message.hot{ color: #9C27B0 }
#news .message:before{ content: ""; display: inline-block; margin-right: 2.5px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900;  }
#news .author { font-size: 0.875rem; margin: 0 7px 5px 0; color: #a0a0a0; display: inline-block; }
#news .author:before{ content: ""; display: inline-block; margin-right: 2.5px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900;  }
#news .top-news .top-news-box { font-size: 0; margin-bottom: 50px; }
#news .top-news .top-news-box .pic-box,
#news .top-news .top-news-box .bot-box { display: inline-block; vertical-align: middle; font-size: 1rem; width: 50%; padding: 0 6%; }
#news .top-news .top-news-box .pic-box { position: relative; overflow: hidden; padding-bottom: 30.7%; }
#news .top-news .top-news-box .pic-box.scroll-view { -moz-animation: ani_fadeInRight 0.8s both; -webkit-animation: ani_fadeInRight 0.8s both; animation: ani_fadeInRight 0.8s both; -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; animation-delay: 0.05s; opacity: 1; }
#news .top-news .top-news-box .pic-box > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#news .top-news .top-news-box .pic-box > div img { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
body:not(.mb) #news .top-news .top-news-box .pic-box:hover { -moz-transform: translate(0, -2px); -ms-transform: translate(0, -2px); -webkit-transform: translate(0, -2px); transform: translate(0, -2px); }
#news .top-news .top-news-box .bot-box { position: relative; }
#news .top-news .top-news-box .bot-box.scroll-view { -moz-animation: ani_fadeInLeft 0.8s both; -webkit-animation: ani_fadeInLeft 0.8s both; animation: ani_fadeInLeft 0.8s both; -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; animation-delay: 0.05s; opacity: 1; }
#news .top-news .top-news-box .bot-box .ti { font-size: 1.375rem; color: #333; margin-bottom: 20px; display: block; z-index: 1; position: relative; font-weight: bold; }
#news .top-news .top-news-box .bot-box .txt { margin-bottom: 30px; line-height: 1.5rem; height: 7.5rem; overflow: hidden; }
#news .news-list { font-size: 0; margin: 0 -35px 20px; }
#news .news-list .box { font-size: 1rem; display: inline-block; vertical-align: top; width: calc(100%/3 - 70px); margin: 0 35px 50px; background: #fff; }
#news .news-list .box.scroll-view { -moz-animation: ani_fadeInUp 0.8s both; -webkit-animation: ani_fadeInUp 0.8s both; animation: ani_fadeInUp 0.8s both; -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; animation-delay: 0.05s; opacity: 1; }
#news .news-list .box .pic-box { display: block; width: 100%; position: relative; overflow: hidden; -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); padding-bottom: 66.19%; }
#news .news-list .box .pic-box > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#news .news-list .box .pic-box > div img { position: absolute; left: 50%; -webkit-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -o-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; -o-transition: -o-transform 0.4s; transition: transform 0.4s; top: 50%; }
body:not(.mb) #news .news-list .box:hover { box-shadow: 0 0 14px rgba(68, 68, 68, 0.1); }
body:not(.mb) #news .news-list .box .pic-box:hover { -moz-transform: scale; -ms-transform: scale; -webkit-transform: scale; transform: scale; }
body:not(.mb) #news .news-list .box .pic-box:hover > div img { -webkit-transform: scale(1.02) translate(-50%, -50%); -ms-transform: scale(1.02) translate(-50%, -50%); -o-transform: scale(1.02) translate(-50%, -50%); transform: scale(1.02) translate(-50%, -50%); }
#news .news-list .box .bot-box { padding: 40px 25px; }
#news .news-list .box .bot-box .ti { font-size: 1.275rem; display: block; color: #333; margin-bottom: 19px; font-weight: bold; height: 3.75rem; overflow: hidden; }
#news .news-list .box .bot-box .txt { font-size: 0.9375rem; color: #444; overflow: hidden; height: 4.5rem; line-height: 1.5rem; }
#news .news-list .box:hover { box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); }
#news .news-list .box .bot-box .ti:hover { color: #000; }

@media (max-width: 1680px) {
#news .search-wrap {  right:20px;}
}

@media (max-width:1366px) {
  #news .top-news { margin-bottom: 15px; }
  #news .top-news .top-news-box .bot-box { padding: 20px; }
  #news .top-news .top-news-box .bot-box .txt { height: 6rem; padding-right: 20px; }
  #news .news-list { margin: 0 -15px 20px; }
  #news .news-list .box { width: calc(100%/3 - 30px); margin: 0 15px 40px; }
}
@media (max-width:1199px) {
  #news .top-news .top-news-box .pic-box { width: 45%; padding-top: 20px; }
  #news .top-news .top-news-box .bot-box { width: 55%; }
  #news .top-news .top-news-box .bot-box .ti { font-size: 1.5rem; margin-bottom: 0; }
  #news .top-news .top-news-box .bot-box .txt { height: 3rem; margin-bottom: 10px; }
}
@media (max-width:991px) {
  #news .search-wrap {  position: relative; margin: 0 auto 10px; width: 50%; right: auto}

  #news .top-news .top-news-box .pic-box,
  #news .top-news .top-news-box .bot-box { width: 50%; }
  #news .news-list .box .bot-box { padding: 30px 20px; }
}
@media (max-width:767px) {
  #news .h2 span.en { font-size: 2rem; letter-spacing: 1px;  }
  #news .h2 span.ch { font-size: 1.25rem; letter-spacing: 3px; }
  #news .news-list { margin: 0 -10px 20px; }
  #news .news-list .box { width: calc(100%/2 - 20px); margin: 0 10px 30px; }
  #news .news-list .box .bot-box .ti { font-size: 1.2rem; }
}
@media (max-width:480px) {
  #news .search-wrap { width: 60%; }
  #news .news-list { margin: 0 0px 20px; }
  #news .news-list .box .bot-box .txt{ margin-bottom: 0 }
#news .top-news .top-news-box .bot-box .ti{ font-size: 1.25rem; }
  #news .top-news .top-news-box .pic-box,
  #news .top-news .top-news-box .bot-box { margin: 10px 0; width: 100%; }
  #news .top-news .top-news-box .pic-box { padding-bottom: 60.19%; }
  #news .news-list .box { width: 100%; margin: 7px 0; }
  #news .news-list .box .inner .description .desc { font-size: 0.875rem; }
}
@media (max-width: 320px) {
   #news .search-wrap { }
}
/* loading */
.page-load-status { display: none; position: relative; z-index: 100; padding-top: 20px; width: 100%; text-align: center; color: #777; }
.page-load-status .infinite-scroll-last,
.page-load-status .infinite-scroll-error { font-size: 1rem; border: 0; color: #fff; display: block; width: 200px; text-align: center; padding: 8px 10px; background: #ccc; margin: 40px auto 0; position: relative; border-radius: 30px; opacity: 0.5; }
.loader-ellips { font-size: 20px; position: relative; width: 75px; height: 1em; margin: 10px auto; }
.loader-ellips .loader-ellips__dot { display: block; width: 8px; height: 8px; border-radius: 0.5em; background: #26a6b9; position: absolute; animation-duration: 0.5s; animation-timing-function: ease; animation-iteration-count: infinite; }
.page-load-trigger { text-align: center; }
.loader-ellips .loader-ellips__dot:nth-child(1),
.loader-ellips .loader-ellips__dot:nth-child(2) { left: 0; }
.loader-ellips .loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips .loader-ellips__dot:nth-child(4) { left: 3em; }
.loader-ellips .loader-ellips__dot:nth-child(1) { animation-name: reveal; }
.loader-ellips .loader-ellips__dot:nth-child(2),
.loader-ellips .loader-ellips__dot:nth-child(3) { animation-name: slide; }
.loader-ellips .loader-ellips__dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
@-webkit-keyframes reveal {
  from { -moz-transform: scale(0.001); -ms-transform: scale(0.001); -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes reveal {
  from { -moz-transform: scale(0.001); -ms-transform: scale(0.001); -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes reveal {
  from { -moz-transform: scale(0.001); -ms-transform: scale(0.001); -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes slide {
  to { -moz-transform: translateX(1.5em); -ms-transform: translateX(1.5em); -webkit-transform: translateX(1.5em); transform: translateX(1.5em); }
}
@-moz-keyframes slide {
  to { -moz-transform: translateX(1.5em); -ms-transform: translateX(1.5em); -webkit-transform: translateX(1.5em); transform: translateX(1.5em); }
}
@keyframes slide {
  to { -moz-transform: translateX(1.5em); -ms-transform: translateX(1.5em); -webkit-transform: translateX(1.5em); transform: translateX(1.5em); }
}

/*=====================  Product List  ========================== */
#product-list { padding: 110px 40px; background-color: #e7e7e7; }
#product-list .h2 span { display: block; }
#product-list .h2 span.en { font-size: 2.25rem; letter-spacing: 3px; font-family: "Roboto Thin"; margin-bottom: 10px; }
#product-list .h2 span.ch { font-size: 1.5rem; letter-spacing: 6px; font-weight: bold; }
#product-list .h2:before { display: none; }
#product-list section { background: #fff; width: 100%; display: block; padding: 45px 0 0; }
#product-list .wrap { font-size: 0; background: #fff; }
#product-list .col-one .box,
#product-list .col-two .box,
#product-list .col-three .box,
#product-list .col-four .box { display: inline-block; vertical-align: top; margin: 0 auto; text-align: center; font-size: 1rem; padding: 0 15px 50px; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -ms-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; }
#product-list .col-one .box { width: 100%; }
#product-list .col-two .box { width: 50%; }
#product-list .col-three .box { width: 33.333333%; }
#product-list .col-four .box { width: 25%; }
#product-list .pro-box { display: block; margin: 0 auto; text-align: center; font-size: 0; }
#product-list .pic-box { position: relative; display: block; margin: 0 auto 20px; }
#product-list .pic-box img { width: 100%; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
#product-list .tag-wrap { position: absolute; left: 0%; top: 10%; }
#product-list .tag-wrap .tag { width: 90px; height: 32px; line-height: 32px; margin-bottom: 15px; text-align: center; border-width: 1px; border-style: solid; border-radius: 30px; font-size: 0.875rem; background: rgba(255, 255, 255, 0.8); }
#product-list .pic-box img { margin: 0 auto; }
#product-list .h3 { font-size: 1.125rem; line-height: 1.125rem; font-weight: bold; margin: 0 auto 30px; height: 2.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#product-list .price { font-size: 1rem; border-width: 1px; height: 40px; line-height: 40px; padding: 0 20px; border-style: solid; display: inline-block; border-radius: 30px; }
#product-list .price .old{ display: inline-block; font-size: 0.9375rem; margin-right: 8px; text-decoration: line-through; color: #999; }
#product-list .col-one .box .pro-box { max-width: 22%; }
#product-list .col-two .box .pro-box { max-width: 40%; }
#product-list .col-four .box .pro-box { max-width: 90%; }
#product-list .col-one .tag-wrap { right: -60px; }
@media only screen and (min-width:992px) {
  #product-list .pro-box:hover .pic-box img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
}
@media only screen and (max-width:1480px) {
  #product-list .col-one .box .pro-box { max-width: 28%; }
}
@media only screen and (max-width:1199px) {
  #product-list .col-four .box { width: 50%; }
  #product-list .col-one .box .pro-box { max-width: 33%; }
  #product-list .col-two .box .pro-box { max-width: 60%; }
  #product-list .col-four .box .pro-box { max-width: 100%; }
  #product-list .tag-wrap { right: 10px; }
  #product-list .h3 { margin-bottom: 15px; overflow: hidden; text-overflow: initial; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media only screen and (max-width:991px) {
  #product-list .col-one .box .pro-box { max-width: 50%; }
  #product-list .col-two .box .pro-box { max-width: 100%; }
  #product-list .col-four .box { width: 50%; }
  #product-list .tag-wrap { right: 15px; top: 20px; left: 10px;}
  #product-list .col-one .tag-wrap,
  #product-list .col-three .tag-wrap { top: 20%; }
}
@media only screen and (max-width:767px) {
  #product-list .h2 span.en { font-size: 1.85rem; }
  #product-list .h2 span.ch { font-size: 1.25rem; }
  #product-list .col-three .box { width: 100% }
  #product-list .col-three .box .pro-box { max-width: 60%; }
}
@media only screen and (max-width:640px) {
  #product-list { padding: 80px 15px; }
  #product-list .col-one .box,
  #product-list .col-two .box,
  #product-list .col-three .box,
  #product-list .col-four .box { padding: 10px 15px 15px 0; }
  #product-list .col-one .box { padding-bottom: 30px; }
  #product-list .col-two .box,
  #product-list .col-three .box,
  #product-list .col-four .box { width: 100%; }
  #product-list .col-one .box .pro-box { max-width: 60%; }
  #product-list .col-two .pic-box,
  #product-list .col-two .txt-box { display: inline-block; vertical-align: middle; }
  #product-list .col-four .pic-box,
  #product-list .col-four .txt-box { display: inline-block; vertical-align: middle; }
  #product-list .col-two .pic-box,
  #product-list .col-four .pic-box { width: calc(42% - 10px); margin-right: 10px; padding: 10px; }
  #product-list .col-two .txt-box,
  #product-list .col-four .txt-box { width: 58%; text-align: left; }
  #product-list .col-two .txt-box .h3,
  #product-list .col-three .txt-box .h3 .box,
  #product-list .col-four .txt-box .h3 { margin-bottom: 10px; font-size: 1.125rem; }
  #product-list .price { font-size: 1rem; height: 35px; line-height: 35px; }
}
@media only screen and (max-width:320px) {
  #product-list .col-one .box .pro-box { max-width: 100%; }
  #product-list .col-one .tag-wrap { right: 15px; top: 20px; }
  #product-list .col-two .box,
  #product-list .col-four .box,
  #product-list .col-two .pic-box,
  #product-list .col-four .pic-box { width: 100%; }
  #product-list .col-two .txt-box,
  #product-list .col-four .txt-box { width: 100%; text-align: center; }
  #product-list .col-two .txt-box .h3,
  #product-list .col-four .txt-box .h3 { margin-bottom: 5px; height: auto; }
}

/*=====================  Product View  ========================== */

/* Checkbox */
.checkbox-style { padding: 0; display: inline-block; font-weight: normal; }
.checkbox-style input { outline: none; display: none; }
.checkbox-style input + span { display: inline-block; vertical-align: middle; background: #fff; border: 1px solid #a6a6a6; width: 28px; height: 28px; padding: 0; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 0; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; box-shadow: 0 0 5px inset rgba(51, 51, 51, 0.3); }
.checkbox-style input + span i { display: inline-block; vertical-align: top; margin: 12px 0 0 11px; width: 14px; height: 8px; border-left: 2px solid #999; border-bottom: 2px solid #999; -moz-transform: scale(0) rotate(-45deg); -ms-transform: scale(0) rotate(-45deg); -webkit-transform: scale(0) rotate(-45deg); transform: scale(0) rotate(-45deg); -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; }
.checkbox-style input:checked + span { border-color: #fff; background: #222; }
.checkbox-style input:checked + span i { -moz-transform: scale(1) rotate(-45deg); -ms-transform: scale(1) rotate(-45deg); -webkit-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); border-left: 2px solid #fff; border-bottom: 2px solid #fff; }
.checkbox-style:active input + span { border-color: #666; }
.checkbox-style:active input:checked + span { border-color: #fff; background: #222; }
.checkbox-style:active input:checked + span i { border-left: 2px solid #fff; border-bottom: 2px solid #fff; }

/* 計數器 */
.qty-wrap { width: 180px; display: block; height: 42px; padding: 0 10px; text-align: center; position: relative; background: #fff; border: 1px solid #d0d0d0; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); }
.qty-wrap:after { content: ""; width: 100%; height: 100%; display: inline-block; position: absolute; left: 0; top: 0; z-index: -5; border: 2px solid #d7d7d7; }
.qty-wrap input,
.qty-wrap a { -webkit-appearance: none; border-radius: 0; }
.qty-wrap input { border: none; text-align: center; height: 100%; width: 100%; overflow: hidden; background: transparent; }
.qty-wrap a { display: block; position: absolute; top: 0; height: 40px; width: 30%; font-size: 0; overflow: hidden; background: #f3f3f3; color: #000; }
.qty-wrap a span { width: 15px; height: 2px; display: block; margin: 20px auto; background: #333; }
.qty-wrap a.qty-plus { right: 0; }
.qty-wrap a.qty-plus span { position: relative; }
.qty-wrap a.qty-plus span:after { content: ""; width: 16px; height: 2px; background: #333; display: block; position: absolute; top: -7px; left: 53%; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; }
.qty-wrap a.qty-minus { left: 0; }
.qty-wrap a:hover { background: #efefef; }
.qty-wrap a:hover span { background: #000; }
.qty-wrap a:hover span:after { background: #000; }
.qty-wrap ul { margin: 0; padding: 0; list-style: none; width: 100%; height: 100%; box-shadow: 0 0 0 1px #ddd inset; overflow: hidden; }
.qty-wrap ul li { height: 100%; }

/* Product View */
#product-view .h3 { /* text-align: center; */ font-weight: bold; margin: 0 0 20px 0; }
#product-view .top-box { padding: 50px 0; font-size: 0; position: relative }
#product-view .top-box:after { content: ""; background: #f9f9f9; width: 50vw; height: calc(100% + 150px); z-index: -1; display: inline-block; position: absolute; right: 0; top: 0; }
#product-view .top-box .pic-box,
#product-view .top-box .txt-box { width: 50%; display: inline-block; vertical-align: top; }
#product-view .top-box .pic-box { position: relative; font-size: 0; /* padding-left: calc((100% - 1500px) / 2) */ }
#product-view .top-box .pic-box img { width: 100%; }
#product-view .top-box .pic-box .slider { position: relative; width: calc(100% - 60px); margin: 0 auto; }
#product-view .top-box .pic-box .slider .item { display: block; }
#product-view .top-box .pic-box .slider .slick-slide > div { width: 100%; position: relative; }
#product-view .top-box .pic-box .slider .slick-slide > div:before { content: ""; display: block; width: 100%; padding-bottom: 100%; }
#product-view .top-box .pic-box .slider .slick-slide > div img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
#product-view .top-box .pic-box .thumbs { position: relative; width: 100%; }
#product-view .top-box .pic-box .thumbs.has-arrow { margin: 0 auto; position: relative; width: 80%; }
#product-view .top-box .pic-box .thumbs.has-arrow .slick-list { width: 80%; margin: 0 auto; }
#product-view .top-box .pic-box .thumbs .slick-slide { padding: 0 12px; }
#product-view .top-box .pic-box .thumbs .slick-slide.slick-current img { border: 1px solid #000; }
#product-view .top-box .pic-box .thumbs .slick-arrow { top: 50%; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; position: absolute; outline: none; background-color: transparent; text-indent: -9999px; z-index: 999; cursor: pointer; padding: 0; top: 50%; width: 50px; height: 50px; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); border: 0; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
#product-view .top-box .pic-box .thumbs .slick-arrow:before { content: ""; position: absolute; display: block; left: 21px; width: 10px; height: 10px; top: 22px; -webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); border-width: 0 0 1px 1px; border-style: solid; transform: rotate(45deg); border-color: #000; -o-transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); }
#product-view .top-box .pic-box .thumbs .slick-arrow.slick-next { right: 0; }
#product-view .top-box .pic-box .thumbs .slick-arrow.slick-next:before { transform: rotate(-135deg); }
#product-view .top-box .pic-box .btn-play { font-style: normal; font-weight: 900; position: absolute; top: 50%; left: 50%; width: 80px; z-index: 2; height: 80px; text-align: center; border-radius: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#product-view .top-box .pic-box .btn-play:before { content: ""; font-family: "Font Awesome 5 Free"; position: absolute; top: 50%; left: 50%; font-size: 1.75rem; line-height: 76px; width: 80px; height: 80px; border: 3px solid #a8a8a8; border-radius: 50%; text-align: center; color: #a8a8a8; background-color: transparent; -moz-transition: background 0.3s, border 0.3s, color 0.3s; -o-transition: background 0.3s, border 0.3s, color 0.3s; -webkit-transition: background 0.3s, border 0.3s, color 0.3s; transition: background 0.3s, border 0.3s, color 0.3s; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#product-view .top-box .pic-box .btn-play:hover:before { color: #333; background: #fff; border: 3px solid #333; }
#product-view .top-box .pic-box .btn-zoom { position: absolute; right: 30px; border: 0; top: 0px; width: 40px; height: 40px; z-index: 5; background: rgba(255, 255, 255, 0.9); text-align: center; color: #666; -webkit-transition: color 0.3s, background 0.3s; -o-transition: color 0.3s, background 0.3s; transition: color 0.3s, background 0.3s; }
#product-view .top-box .pic-box .btn-zoom:after { content: ''; font-family: "Font Awesome 5 Free"; font-size: 1.125rem; line-height: 40px; font-weight: bold; }
#product-view .top-box .pic-box .btn-zoom:hover { background: #45968f; color: #fff; }
#product-view .top-box .txt-box { width: 50%; padding-left: 50px; font-size: 1rem;  }
#product-view .top-box .txt-box .tag { display: inline-block; text-align: center; background: #333; border-radius: 5px; color: #fff; width: 85px; font-size: 0.8rem; height: 30px; margin-right: 20px; vertical-align: top; }
#product-view .top-box .txt-box .h3 { font-weight: bold; display: inline-block; margin: 0; font-size: 1.875rem; padding: 0; position: relative; vertical-align: top; }
#product-view .top-box .txt-box .describe { padding: 15px 0; line-height: 1.8rem; }
#product-view .top-box .txt-box .specific { margin: 25px 0 5px; }
#product-view .top-box .txt-box .specific li { font-size: 0; overflow: hidden; }
#product-view .top-box .txt-box .specific li >* { font-size: 1rem; }
#product-view .top-box .txt-box .specific li > div { display: inline-block; color: #222; font-size: 1rem;  }
#product-view .top-box .txt-box .specific li .tit { width: 115px; margin-right: 20px; padding: 10px 0; position: relative; text-align-last: unset; line-height: 30px }
#product-view .top-box .txt-box .specific li .tit.p-l{ width: 150px; }

#product-view .top-box .txt-box .specific li .content { position: relative; width: calc(100% - 136px); padding: 10px 0; }

#product-view .top-box .txt-box .specific li .content.p-l {width: calc(100% - 170px);}
#product-view .top-box .txt-box .specific li .content.open-box img { display: inline-block; width: 35px; height: 35px; margin-right: 5px }
#product-view .top-box .txt-box .specific li .content .color-list li { display: inline-block }
#product-view .top-box .txt-box .specific li .content .color-list li> a { display: block; width: 74px; height: 74px; padding: 2px; margin: 5px 2px; position: relative; border: 1px solid #ddd; }
#product-view .top-box .txt-box .specific li .content .color-list li> a.out-of { position: relative; opacity: 0.8 }
#product-view .top-box .txt-box .specific li .content .color-list li> a.out-of:after { content: '售完'; letter-spacing: 5px; font-size: 0.875rem; color: #fff; background: rgba(0, 0, 0, 0.5); display: inline-block; position: absolute; left: 0; top: 50%; width: 100%; text-align: center; height: 30px; line-height: 30px; margin-top: -15px; }
#product-view .top-box .txt-box .specific li .content .color-list li> a> img { width: 100%; }
#product-view .top-box .txt-box .specific li .content .color-list li> a.active { box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) }
#product-view .top-box .txt-box .specific li .content .size-list li { display: inline-block }
#product-view .top-box .txt-box .specific li .content .size-list li> a { display: block; width: 74px; height: 74px; padding: 2px; font-size: 1rem;/*  padding: 2px 15px; */ color: #333; margin: 5px 2px; position: relative; border: 1px solid #ddd; }
#product-view .top-box .txt-box .specific li .content .size-list li> a.out-of { position: relative; opacity: 0.8 }
#product-view .top-box .txt-box .specific li .content .size-list li> a.out-of:after { content: '售完'; letter-spacing: 5px; font-size: 0.875rem; color: #fff; background: rgba(0, 0, 0, 0.5); display: inline-block; position: absolute; left: 0; top: 50%; width: 100%; text-align: center; height: 30px; line-height: 30px; margin-top: -15px; }
#product-view .top-box .txt-box .specific li .content .size-list li> a.active { box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) }
#product-view .top-box .txt-box .specific li .content .size-list li> a img { width: 100%; }
#product-view .top-box .txt-box .specific li .content .payWayBox { width: 100%; background: #fff; vertical-align: middle; position: relative; }
#product-view .top-box .txt-box .specific li .content .payWayBox > img { vertical-align: text-top; display: inline-block; margin-right: 3px; color: #666; }
#product-view .top-box .txt-box .specific li .content .payWayBox .far,
#product-view .top-box .txt-box .specific li .content .payWayBox .fas { display: inline-block; margin-right: 3px; color: #666; }
#product-view .top-box .txt-box .specific li.mix-wrap .content { vertical-align: top; font-size: 0; width: calc(100% - 140px); }
#product-view .top-box .txt-box .specific li.mix-wrap .content >* { margin-right: 5px; float: left; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .select-style { width: auto; vertical-align: middle; display: inline-block; font-size: 16px; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .select-style[name="buy_mix_num"] { width: 60px; height: 40px; padding: 0 0 0 10px; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .select-style:first-child { width: calc(100% - 5px - 65px - 40px); height: 40px; overflow: hidden; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-add { margin-right: 0; vertical-align: middle; background: #333; color: #fff; font-size: 1.25rem; width: 40px; height: 40px; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-num { font-size: 1rem; margin-right: 10px; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box { width: 100%; display: block; border-bottom: solid #ddd 1px; padding: 10px 15px; font-size: 0.9375rem; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .btn { width: 20px; height: 20px; line-height: 14px; border-radius: 20px; padding: 0; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .mix-name { width: calc(100% - 124px - 54px - 84px - 24px); height: 26px; display: inline-block; overflow: hidden; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .qty-wrap { width: 100px; height: 30px; margin: 0 10px; display: inline-block; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .qty-wrap a { height: 28px; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .qty-wrap a span { width: 10px; margin: 13px auto; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .qty-wrap a.qty-plus span:after { width: 10px; top: -4.5px; }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .mix-price { width: 50px; display: inline-block }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .mix-open { width: 80px; display: inline-block; color: #666 }
#product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .mix-del { background: #333; color: #fff; font-size: 0.9375rem; }
.mfp-title { color: #333; text-align: center }
#product-view .top-box .txt-box .specific li.item-wrap .tit { padding: 8px 0; }
#product-view .top-box .txt-box .specific li.item-wrap .content ul.tab { padding: 0; list-style: none; }
#product-view .top-box .txt-box .specific li.item-wrap .content ul.tab li { display: inline-block; padding: 0; }
#product-view .top-box .txt-box .specific li.item-wrap .content ul.tab li .g-button { width: auto; padding: 8px 15px; font-size: 0.9375rem; margin-right: 5px; }
#product-view .top-box .txt-box .specific li.item-wrap .content ul.tab li .g-button.current { border: 2px solid #d5cbbe; color: #fff; background: url("../images/btn_hover.png") center center #73470d; color: #fff; }
#product-view .top-box .txt-box .specific li.item-wrap .content ul.tab li .g-button:hover { border: 2px solid #d5cbbe; color: #fff; background: url("../images/btn_hover.png") 0 center #73470d; color: #fff; }
#product-view .top-box .txt-box .specific li.item-wrap .content ul.tab li .g-button.current:after,
#product-view .top-box .txt-box .specific li.item-wrap .content ul.tab li .g-button:hover:after { display: none; }
#product-view .top-box .txt-box .specific li .btn-fav { background: #f4c91a; border: 2px solid #fbeaa3; color: #fff; vertical-align: middle; margin-right: 5px; padding: 8px 10px; }
#product-view .top-box .txt-box .specific li .btn-fav:after { display: none; }
#product-view .top-box .txt-box .specific li .btn-fav.done { background: #949494; border: 2px solid #c9c9c9; }
#product-view .top-box .txt-box .specific li .btn-cart { background: #ff9100; color: #fff; border: 2px solid #ffd6a1; padding: 8px 10px; }
#product-view .top-box .txt-box .specific li .btn-cart:before { content: ""; width: 25px; height: 25px; background: url(../images/icon_cart.png) 0 -53px no-repeat; display: inline-block; vertical-align: middle; margin-right: 5px; }
#product-view .top-box .txt-box .specific li .btn-cart:after { display: none; }
#product-view .top-box .txt-box .specific li .btn-fav:hover { background: url("../images/btn_hover_w.png") center center #f4c91a; }
#product-view .top-box .txt-box .specific li .btn-fav.done:hover { background: #949494; border: 2px solid #c9c9c9; }
#product-view .top-box .txt-box .specific li .btn-cart:hover { background: url("../images/btn_hover_w.png") center center #ff9100; }
#product-view .top-box .txt-box .promot-text { margin: 5px 0; font-weight: bold; color: #888; font-size: 0.875rem; text-align: right }
#product-view .top-box .txt-box .price { color: #000; font-size: 1.2rem; margin: 0;}
#product-view .top-box .txt-box .price .old { display: inline-block; color: #000; text-decoration: line-through; margin-right: 10px; font-size: 1.2rem; }
#product-view .top-box .txt-box .price .new { display: inline-block; color: #000; font-size: 1.2rem; margin-right: 10px;  }
#product-view .top-box .txt-box .price .date { display: none; color: #444; }
#product-view .top-box .txt-box .input { display: block; height: 40px; width: 100%; padding: 0 10px; text-align: center; position: relative; background: #fff; border: 1px solid #d0d0d0; }
#product-view .top-box .txt-box .open-box { position: relative; cursor: pointer; padding: 8px 0; display: none; -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); }
#product-view .top-box .txt-box .open-box:after { content: ""; width: 10px; height: 10px; border-top: 2px solid #222; border-right: 2px solid #222; transform: rotate(135deg); position: absolute; right: 20px; top: 25px; -moz-transition: rotate 1s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: rotate 1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: rotate 1s cubic-bezier(0.7, 0, 0.3, 1); transition: rotate 1s cubic-bezier(0.7, 0, 0.3, 1); }
#product-view .top-box .txt-box .specific li.line.open .open-box:after { transform: rotate(-45deg); }
#product-view .top-box .txt-box .specific li > div.edit-box { height: 0; opacity: 0; display: block; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
#product-view .top-box .txt-box .specific li > div.edit-box.open { height: auto; opacity: 1; margin-bottom: 20px; }
#product-view .top-box .txt-box .btn-wrap { font-size: 0; }
#product-view .top-box .txt-box .btn-wrap > button,
#product-view .top-box .txt-box .btn-wrap > a { position: relative; height: 47px; line-height: 47px; display: inline-block; vertical-align: top;/*  width: 25%; */ border: 0; color: #fff; background: #696969; font-size: 1rem; text-align: center; padding: 0 20px; vertical-align: middle; }
#product-view .top-box .txt-box .btn-wrap > button i,
#product-view .top-box .txt-box .btn-wrap > button a { display: inline-block; margin-right: 10px; }
#product-view .top-box .txt-box .btn-wrap > button:before #product-view .top-box .txt-box .btn-wrap > a:before { position: absolute; left: 9%; top: 2px; }
#product-view .top-box .txt-box .btn-wrap .btn-discont { border: #555555 solid 1px; border-right: 0; color: #333; background: #fff; }
#product-view .top-box .txt-box .btn-wrap .btn-discont:before { content: url("../images/btn_discont.png"); margin-right: 5px; }
#product-view .top-box .txt-box .btn-wrap .btn-fav { background: #555555; }
#product-view .top-box .txt-box .btn-wrap .btn-cart { background: #323237; }
#product-view .top-box .txt-box .btn-wrap .btn-cart:before { content: url("../images/btn_cart.png"); }
#product-view .top-box .txt-box .btn-wrap .btn-buy:before { content: url("../images/btn_buy.png"); left: 15%; margin-right: 5px; }
#product-view .top-box .txt-box .btn-wrap .btn-inq:before { content: url("../images/btn_buy.png"); }
#product-view .top-box .txt-box .specific li.line { border-bottom: 1px solid #ddd; }

/* Share Box */
#product-view .top-box .txt-box .specific .share-box { display: inline-block; text-align: right; color: #858c99; font-size: 0.9rem; }
#product-view .top-box .txt-box .specific .share-box > a { display: inline-block; margin: 0 0 0 6px; border-radius: 100%; width: 35px; height: 35px; overflow: hidden; text-align: center; line-height: 35px; vertical-align: middle; background: #222; color: #d5d5d5; cursor: pointer; }
#product-view .top-box .txt-box .specific .share-box .copy-url { display: inline-block; margin: 0 0 0 6px; border-radius: 100%; width: 35px; height: 35px; overflow: hidden; text-align: center; line-height: 35px; vertical-align: middle; background: #222; color: #d5d5d5; cursor: pointer; }
#product-view .top-box .txt-box .specific .share-box .copy-url:hover { color: #fff; }
#product-view .top-box .txt-box .specific .share-box > a i { color: #d5d5d5; font-size: 1rem; }
#product-view .top-box .txt-box .specific .share-box > a svg { vertical-align: middle; fill: #d5d5d5; }
#product-view .top-box .txt-box .specific .share-box > a:hover i { color: #fff; }
#product-view .top-box .txt-box .specific .share-box > a:hover svg { fill: #fff; }

/* 我要加購 */
#product-view .add-purchase { padding: 30px; margin: 20px 0; border: 2px solid #fff }
#product-view .top-box .txt-box .add-purchase .h3 { font-size: 1.125rem; margin: 0; }
#product-view .purchase-wrap .slider .slick-slide { margin: 0 15px; }
#product-view .purchase-wrap .slider .slick-list { margin: 0 -15px; }
#product-view .purchase-wrap .slider .slick-arrow { background: #222; }
#product-view .purchase-wrap .slider .slick-arrow:before { border-color: #fff; }
#product-view .purchase-wrap .slider .slick-arrow.slick-prev { left: -70px; }
#product-view .purchase-wrap .slider .slick-arrow.slick-next { right: -70px; }
#product-view .purchase-wrap .item { font-size: 0; padding-top: 15px; }
#product-view .purchase-wrap .item:not(:last-child) { border-bottom: 1px solid #ddd; padding-bottom: 15px }
#product-view .purchase-wrap .item .checkbox-style { width: 50px; }
#product-view .purchase-wrap .item.checked .pic-box { border: 1px solid #000; }
#product-view .purchase-wrap .item .pic-box,
#product-view .purchase-wrap .item .txt-box { display: inline-block; font-size: 1rem; vertical-align: middle; }
#product-view .purchase-wrap .item .pic-box { width: 80px; }
#product-view .purchase-wrap .item .pic-box img { width: 100%; border: 1px solid #ddd; }
#product-view .purchase-wrap .item .txt-box { width: calc(100% - 50px - 80px); padding: 10px 0 10px 20px; }
#product-view .purchase-wrap .item .txt-box .ti,
#product-view .purchase-wrap .item .txt-box .price,
#product-view .purchase-wrap .item .txt-box .speci { font-size: 0.9375rem; float: left; display: inline-block; }
#product-view .purchase-wrap .item .txt-box .ti { width: calc(100% - 20% - 100px); margin-bottom: 5px; padding-right: 5px; font-weight: bold; line-height: 1.5rem; max-height: 3rem; overflow: hidden; }
#product-view .purchase-wrap .item .txt-box .price { width: 20%; font-size: 1rem; line-height: 1.5rem; padding-right: 5px; }
#product-view .purchase-wrap .item .txt-box .speci { width: 100px; }
#product-view .purchase-wrap .item .txt-box .speci select { min-width: 100%; }
#product-view .purchase-wrap .item .txt-box .qty-wrap { height: 30px; width: 100px; }
#product-view .purchase-wrap .item .txt-box .qty-wrap a { height: 28px; }
#product-view .purchase-wrap .item .txt-box .qty-wrap a span { width: 10px; margin: 13px auto; }
#product-view .purchase-wrap .item .txt-box .qty-wrap a.qty-plus span:after { width: 10px; top: -4.5px; }
#product-view .product-intro { background: #fff; padding: 5% 0; }
#product-view .product-intro .nav-box { font-size: 0; width: auto; margin: 0 auto 30px; text-align: center; border-bottom: 1px solid #ccc; }
#product-view .product-intro .nav-box .tab-box > li { position: relative; display: inline-block; text-transform: uppercase; cursor: pointer; font-weight: bold; }
#product-view .product-intro .nav-box .tab-box > li span { position: relative; display: inline-block; color: #757575; font-size: 1.125rem; background: #fff; padding: 0 33px; height: 60px; line-height: 60px; }
#product-view .product-intro .nav-box .tab-box > li.current span { color: #000000; }
#product-view .product-intro .nav-box .tab-box > li.current:before { display: block; position: absolute; left: 25%; bottom: -2px; width: 50%; height: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); border-radius: 100%; z-index: 0; }
#product-view .product-intro .bottom-box { position: relative; padding: 50px 0; }
#product-view .product-intro .bottom-box .tab-content { position: absolute; opacity: 0; transform: scale(0); transition: opacity 0.5s, transform 0.001s 0.5s; }
#product-view .product-intro .bottom-box .tab-content.current { position: relative; opacity: 1; transform: scale(1); min-height: 30vh; }

/* 推薦商品 */
#product-view .recommend { padding: 40px 0; background: #f2f2f2; text-align: center }
#product-view .recommend-wrap { font-size: 0; margin: 0 -10px 50px; }
#product-view .recommend-wrap .item { display: inline-block; width: calc(25% - 20px); margin: 0 10px; background: #fff; }
#product-view .recommend-wrap .item .pic-box { display: inline-block; width: 100%; }
#product-view .recommend-wrap .item .pic-box img { width: 100%; }
#product-view .recommend-wrap .item .txt-box { padding: 15px 20px; text-align: center; font-size: 1rem; }
#product-view .recommend-wrap .item .txt-box .ti { font-weight: bold; line-height: 1.5rem; margin-bottom: 10px; height: 3rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#product-view .recommend-wrap .item .txt-box .price { margin-bottom: 10px; }
#product-view .btn-back { background: #323237; font-size: 0.9375rem; }
#product-view #custom .top-box:after { display: none; }
#product-view #custom .top-box .pic-box { width: calc(100% - 100%/3); margin: 0 -15px; }
#product-view #custom .top-box .pic-box .custom-pic { position: relative; display: inline-block; width: calc(100%/2 - 30px); margin: 0 15px 15px; }
#product-view #custom .top-box .pic-box .icon-zoom { position: absolute; right: 15px; bottom: 15px; width: 36px; height: 36px; background: url("../images/icon_zoom.png") center center no-repeat; opacity: 0; }
#product-view #custom .top-box .txt-box { width: calc(100%/3); padding-top: 0; }
#product-view #custom .top-box .txt-box .btn-wrap > button { width: calc(100%/3); }
#product-view #custom .top-box .txt-box .btn-wrap > a { width: calc(100%/3); }
#product-view #custom .top-box .txt-box .btn-wrap > a > i { display: inline-block; margin-right: 5px; }
#product-view #custom .top-box .txt-box .btn-wrap .btn-discont:before { display: none; }
#product-view #custom .top-box .txt-box .tab { border-bottom: 2px solid #ccc; font-size: 0; text-align: left; }
#product-view #custom .top-box .txt-box .tab li { height: 50px; display: inline-block; margin-bottom: -2px; }
#product-view #custom .top-box .txt-box .tab li a { display: block; height: 50px; line-height: 50px; color: #b2b2b2; transition: background 0.3s linear; -ms-transition: background 0.3s linear; -moz-transition: background 0.3s linear; -webkit-transition: background 0.3s linear; padding: 0 20px; font-size: 20px; }
#product-view #custom .top-box .txt-box .tab li a:hover { border-bottom: 1px solid #000; }
#product-view #custom .top-box .txt-box .tab li a.current { color: #333; border-bottom: 1px solid #000; }
#product-view #custom .top-box .txt-box .infoWrap .pic-wrap { padding: 30px 0px; font-size: 0; margin: 0 -10px; }
#product-view #custom .top-box .txt-box .infoWrap .pic-merge { display: inline-block; width: calc(25% - 20px); margin: 0 10px; }
#product-view #custom .top-box .txt-box .infoWrap .pic-merge img { width: 100%; }
@media only screen and (min-width:992px) {
  .btn-back:hover span:before,
  .btn-back:hover span:after { left: 8px; }
  .btn-back:hover span:last-child:before,
  .btn-back:hover span:last-child:after { left: 0px; }
  #product-view .product-intro .nav-box .tab-box > li:hover span { color: #000; }
  #product-view .top-box .txt-box .specific li .content .color-list li> a:hover { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) }
  #product-view .top-box .txt-box .specific li .content .size-list li> a:hover { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) }
}
@media only screen and (max-width:1199px) {
  #product-view .top-box .pic-box .thumbs.has-arrow { width: 85%; }
  #product-view .top-box .pic-box .thumbs.has-arrow .slick-list { width: 85%; }
  #product-view .top-box .pic-box .thumbs .slick-slide { padding: 0 8px; }
}
@media only screen and (max-width:991px) {
  .qty-wrap { width: 120px; }
  #product-view .top-box { padding: 50px 0 50px 0; }
  #product-view .top-box:after { display: none; }
  #product-view .top-box .pic-box { display: block; width: 100%; max-width: 100%; margin: 0 auto 20px; }
  #product-view .top-box .txt-box { display: block; width: 100%; max-width: 100%; margin: 0 auto 20px; padding: 10px 20px 20px; }
  #product-view .top-box .pic-box { width: 100%; max-width: 700px; margin: 0 auto 50px; float: none; display: block; }
  #product-view .top-box .pic-box .thumbs .slick-slide { padding: 0 8px; }
  #product-view .top-box .purchase-wrap .txt-box .price { background: transparent; color: #222; }
  #product-view .add-purchase { border-top: 1px dotted #ddd }
}
@media only screen and (max-width:767px) {
  #product-view .product-intro .nav-box .tab-box > li span { padding: 0 10px; line-height: 40px; height: 40px; font-size: 1rem; }
  #product-view .top-box .pic-box { margin-bottom: 30px }
  #product-view .top-box .txt-box .specific { margin-top: 0 }
  #product-view .top-box .txt-box .h3 { font-size: 1.425rem; margin: 0 0 5px 0; }
  #product-view .top-box .txt-box .btn-wrap { margin-bottom: 20px; }
  #product-view .top-box .txt-box { padding-top: 0 }
  #product-view .product-intro .bottom-box { position: relative; padding: 20px 0; }
  #product-view .purchase-wrap .item .pic-box { width: 15%; margin-bottom: 0; vertical-align: top }
  #product-view .purchase-wrap .item .txt-box { width: calc(100% - 50px - 15%); margin-bottom: 0; vertical-align: top; padding: 0 0 0 20px; }
  #product-view .purchase-wrap .item .txt-box >* { font-size: 0.9375rem; float: left; }
  #product-view .purchase-wrap .item .txt-box .ti { width: 100%; height: auto; max-height: auto }
  #product-view .purchase-wrap .item .txt-box .price { width: 33.33%; }
  #product-view .purchase-wrap .item .txt-box .speci { width: 33.33%; }
  #product-view .purchase-wrap .item .txt-box .qty-wrap { float: right; }
  #product-view .recommend-wrap { text-align: left; }
  #product-view .recommend-wrap .item { width: calc(50% - 20px); margin-bottom: 20px; }
}
@media only screen and (max-width:639px) {
  #product-view .top-box .pic-box { padding-right: 0; }
  #product-view .top-box .pic-box .slider { width: 100%; }
  #product-view .top-box .pic-box .thumbs.has-arrow { width: 100%; }
  #product-view .top-box .pic-box .thumbs.has-arrow .slick-list { width: calc(100% - 80px); }
  #product-view .top-box .pic-box .thumbs .slick-slide { padding: 0 5px; }
  #product-view .top-box .txt-box { padding: 0 10px; }
  #product-view .top-box .txt-box .h3 { font-size: 1.25rem; }
  #product-view .top-box .txt-box .tag{ margin-bottom: 7px; }
  #product-view .top-box .txt-box .price { background: #444; border-radius: 8px; line-height: 40px; padding: 0 15px; color: #fff; display: inline-block; font-size: 1.125rem; }
  #product-view .top-box .txt-box .price .old {  color: #999;  font-size: 0.875rem;}
  #product-view .top-box .txt-box .price .new { color: #fff;  font-size: 1.125rem; margin: 0}
  #product-view .top-box .txt-box .open-box:after { top: 15px; }
  #product-view .top-box .txt-box .specific li .tit { width: 105px; margin-right: 10px; text-align: center; font-size: 0.9375rem; padding: 5px 0px; line-height: 40px}
  #product-view .top-box .txt-box .specific li .content { width: calc(100% - 115px); padding: 5px 0; }
  #product-view .top-box .txt-box .specific.one li .tit { width: 65px; }
  #product-view .top-box .txt-box .specific.one li .content { width: calc(100% - 65px); }
  #product-view .top-box .txt-box .specific li .content .color-list li> a { width: 55px; height: 55px; }
  #product-view .top-box .txt-box .specific li .content .size-list li> a { width: 55px; height: 55px; /* padding: 2px 10px; */ margin: 2px }
  #product-view .top-box .txt-box .specific li.mix-wrap .tit.d-text { width: 105px; margin-right: 10px; }
  #product-view .top-box .txt-box .specific li.mix-wrap .content { width: calc(100% - 115px); }
  #product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .mix-name { width: 100%; }
  #product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box { padding: 10px 0; }
  #product-view .top-box .txt-box .specific li.mix-wrap .content .mix-box .qty-wrap { margin: 0 10px 0 0 }
  #product-view .top-box .txt-box .btn-wrap > button,
  #product-view .top-box .txt-box .btn-wrap > a { width: 33.33%; margin-bottom: 5px;  padding: 0; font-size: 0.8rem;}
  #product-view .product-intro .nav-box .tab-box > li span { padding: 0 5px; }
  #product-view .add-purchase { padding: 30px 0; }
  #product-view .purchase-wrap .item .checkbox-style { width: 40px; }
  #product-view .purchase-wrap .item .pic-box { width: 20%; }
  #product-view .purchase-wrap .item .txt-box { width: calc(100% - 40px - 20%); padding-left: 10px; }
  #product-view .purchase-wrap .item .txt-box >* { float: none; display: block; height: auto; margin-bottom: 5px; }
  #product-view .purchase-wrap .item .txt-box .ti { line-height: 1.2 }
  #product-view .purchase-wrap .item .txt-box .price { width: 100%; padding: 0; line-height: 1.2 }
  #product-view .purchase-wrap .item .txt-box .speci { width: 100%; }
  #product-view .purchase-wrap .item .txt-box .qty-wrap { float: none; }
}
@media (max-width: 549px){
  #product-view .product-intro .nav-box .tab-box > li{width: 100%;}
}
@media only screen and (max-width:480px) and (min-width:320px) {
  #product-view .top-box .txt-box .btn-wrap > button,
  #product-view .top-box .txt-box .btn-wrap > a { width: 80%; display: block; margin: 0 auto 5px; }
}
@media (max-width: 399px){
  #product-view .top-box .txt-box .specific li .tit.p-l{ width: 100%; text-align: left;}
  #product-view .top-box .txt-box .specific li .content.p-l{ width: 100%; }
}
@media only screen and (max-width:320px) {
  #product-view .top-box .pic-box .thumbs.has-arrow .slick-list { width: calc(100% - 80px); }
  #product-view .top-box .pic-box .thumbs .slick-slide { padding: 0 3px; }
  #product-view .top-box .txt-box .btn-wrap .btn-discont { border-right: #555555 solid 1px; }
  #product-view .product-intro .nav-box .tab-box > li span { font-size: 0.8375rem; }
}

/* Custom */
@media only screen and (min-width:992px) {
  #product-view #custom .top-box .custom-pic .icon-zoom { opacity: 0; }
  #product-view #custom .top-box .custom-pic:hover .icon-zoom { opacity: 1; }
  #product-view #custom .top-box .txt-box .infoWrap .pic-merge:hover { opacity: 0.8; }
}
@media only screen and (max-width:1199px) {
  #product-view #custom .top-box .pic-box { width: 55%; }
  #product-view #custom .top-box .txt-box { width: 45%; }
}
@media only screen and (max-width:991px) {
  #product-view #custom .top-box .pic-box { width: 100%; margin: 0 auto; padding: 0; float: none; display: block; }
  #product-view #custom .top-box .txt-box { width: 100%; margin: 0 auto; padding: 0; float: none; display: block; }
  #product-view #custom .top-box .txt-box .infoWrap .pic-merge { width: calc(100%/8 - 20px); }
}
@media only screen and (max-width:767px) {
  #product-view #custom .top-box .txt-box .infoWrap .pic-merge { width: calc(100%/6 - 20px); }
}
@media only screen and (max-width:640px) {
  #product-view #custom .top-box .txt-box .btn-wrap > button,
  #product-view #custom .top-box .txt-box .btn-wrap > a { width: 100%; margin-bottom: 5px; border: 1px solid #222; }
  #product-view #custom .top-box .txt-box .infoWrap .pic-wrap { margin: 0 -5px; }
  #product-view #custom .top-box .txt-box .infoWrap .pic-merge { width: calc(100%/4 - 10px); margin: 0 5px; }
}
#item-view canvas { max-width: 100%; height: auto !important; }
.blur-style { filter: blur(5px); -webkit-filter: blur(5px); }
#custom-txt a.disable { cursor: not-allowed; }
#custom-edit { font-size: 0; min-height: 100vh; osition: relative; }
#custom-edit .title { font-weight: bold; margin: 25px auto; text-align: center; }
.btn-wrap { font-size: 0; text-align: center; }
.btn-wrap .btn { display: inline-block; border: 1px solid #222; font-size: 1rem; height: 45px; line-height: 45px; width: 50%; padding: 0; border-radius: 0; }
.btn-wrap .btn-zoom { position: absolute; right: 50px; bottom: 50px; width: 36px; height: 36px; background: url("../images/icon_zoom.png") center center no-repeat; width: 150px; }
#custom-edit .btn-wrap .btn.back { background: #fff; color: #333; }
#custom-edit .btn-wrap .btn.done { background: #333; color: #fff; }
#custom-edit .btn-wrap .cencle { color: #333; }
#item-view { z-index: 0; width: 100%; display: inline-block; vertical-align: top; min-height: 100vh; top: 0px; left: 0; right: 0; bottom: 0; display: inline-block; vertical-align: top; background: #f9f9f9; }
.g-wrap#custom-edit #item-view { width: calc(100% - 20%); }
#custom-edit #item-view .btn-wrap { display: none; }
#item-view .btn-wrap { width: 100%; position: relative; }
#item-view .btn-wrap .btn.done { width: 150px; margin-top: 20px; background: #333; color: #fff; }
#item-view .list {  /*  max-width: 600px; */
font-size: 1rem; margin: 0 auto; }
#item-view .list .item { display: block; }
#item-view .list .slick-slide { text-align: center; }
#item-view .list .slick-slide img { max-width: 800px; width: 100%; margin: 0 auto; }
#item-view .list .slick-dots { bottom: 0px; }
#item-view .list.slider .slick-arrow.slick-prev { left: 10px; }
#item-view .list.slider .slick-arrow.slick-next { right: 10px; }
#custom-edit #item-part { font-size: 1rem; width: 20%; position: fixed; right: 0; top: 50px; z-index: 1; top: 0; bottom: 0; right: 0; border-left: 5px solid #fff; overflow-y: auto; overflow-x: visible; display: none; text-align: center; font-weight: bold; background: #fff; }
#custom-edit #item-part .list { margin: 0; padding: 0; list-style: none; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; flex-wrap: wrap; align-content: space-around; overflow: hidden; }
#custom-edit #item-part .list .box { height: 200px; display: block; border: none; cursor: pointer; text-align: center; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; margin-bottom: 5px; width: 100%; background: #f9f9f9; }
#custom-edit #item-part .list .box:hover { background: #f9f9f9; }
#custom-edit #item-part .list .box .icon { height: calc(100% - 30px); }
#custom-edit #item-part .list .box .icon img { height: 100%; width: auto; margin: 0 auto; }
#custom-edit #item-options { font-size: 1rem; width: 20%; position: fixed; right: 0; top: 50px; display: none; z-index: 2; bottom: 0; right: 0; border-left: 4px solid #fff; overflow-y: auto; overflow-x: visible; background: #fff; }
#custom-edit #item-options.is-open { display: block; top: 50px; -moz-animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); }
#custom-edit #item-part.is-open { display: block; top: 50px; -moz-animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); }
#custom-edit #item-options.is-close,
#custom-edit #item-part.is-close { -moz-animation: ani_sideAreaOut 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-animation: ani_sideAreaOut 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); animation: ani_sideAreaOut 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); }
#custom-edit #item-options .back-part { position: absolute; height: 30px; width: 30px; border: 1px solid #222; border-radius: 50px; display: inline-block; top: 25px; left: 21px; cursor: pointer; }
#custom-edit #item-options .back-part:before { content: ""; position: absolute; width: 8px; height: 8px; top: 10px; left: 10px; display: block; border-top: 1px solid #222; border-right: 1px solid #222; transform: rotate(-135deg); }
#custom-edit #item-options .back-part:after { content: "Back"; display: inline-block; line-height: 30px; margin-left: 38px; }
#custom-edit .color-nav { display: inline-block; width: 100%; vertical-align: top; font-size: 1rem; font-size: 0; z-index: 99; background: #fff; }
#custom-edit .color-nav .item { display: inline-block; width: calc(50% - 6px); font-size: 1rem; text-align: center; background: #f9f9f9; padding: 30px 0; margin: 3px; }
#custom-edit .color-nav .item:hover { background: #dddddd; }
#custom-txt { background: transparent; }
#custom-edit #item-part .list .box:hover .name { color: #000 }
#custom-txt input { height: 44px; padding: 2px 10px; line-height: 38px; display: block; width: 300px; max-width: 300px; border: 1px solid #fff; color: #fff; text-align: center; margin: 0 auto 25px; font-size: 1.25rem; font-weight: bold; background: transparent; }
#custom-txt .btn-wrap { text-align: center; width: 200px; margin: 0 auto; font-size: 0 }
#custom-txt .btn-wrap .btn { width: calc(50% - 10px); margin: 0 5px; font-size: 1rem; }
#custom-txt .btn-wrap .btn-submit { background: #000; color: #fff; border: 1px solid #000; }
#custom-txt .btn-wrap .btn-close { color: #666; background: #efefef; }
#custom-txt .mfp-close-btn-in .mfp-close { color: #fff; }

/* Radio */
#item-options .list { display: block; margin: 0; padding: 0; font-size: 0; }
#item-options .list.hide-icon .box { display: block; width: 100%; }
#item-options .list.hide-icon .box a .icon { display: none; }
#item-options .list .box { display: inline-block; width: calc(50% - 6px); text-align: center; position: relative; }
#item-options .list .box .boxlink { display: table; height: 100%; width: 100%; vertical-align: top; background: #f9f9f9; padding: 30px 0; margin: 3px; color: #333; font-size: 1rem; }
#item-options .list .box .boxlink:hover { background: #dddddd; }
#item-options .list .box .boxlink .icon { width: 90px; border-radius: 50%; background: #fff; overflow: hidden; position: relative; display: inline-block; margin: 0 auto; line-height: 0; font-size: 0; border: 5px solid #fff; box-shadow: 0 0 5px rgba(51, 51, 51, 0.3); }
#item-options .list .box.current .boxlink .icon { border-color: #666; background: #222; }
#item-options .list .box .boxlink .icon div,
#item-options .list .box .boxlink .icon img { width: 100%; }
#item-options .list .box .boxlink .icon div { padding-bottom: 100%; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; }
#item-options .list .box .name { font-size: 1.125rem; display: inline-block; width: 100%; position: relative; }
#item-options .list .box .name .note { display: inline-block; width: 100%; font-size: 0.875rem; font-style: normal; line-height: 1; }
#item-options .list .box .name .note.color { color: red; left: 0; bottom: -2px; position: absolute; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); }
#item-options .list #cusitem-logo-file { outline: 1px solid red; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: none; border: none; opacity: 0; }
#item-options .list #cusitem-logo-filename { font-size: 1.125rem; display: inline-block; width: 100%; position: relative; background: none; border: none; box-shadow: none; text-align: center; }
#item-options .list #cusitem-logo-filename::-webkit-input-placeholder { color: #333; }
#item-options .list #cusitem-logo-filename:-moz-placeholder { color: #333; }
#item-options .list #cusitem-logo-filename::-moz-placeholder { color: #333; }
#item-options .list #cusitem-logo-filename:-ms-input-placeholder { color: #333; }
@media only screen and (max-width:1680px) {
  .g-wrap#custom-edit #item-view { width: calc(100% - 25%); padding-bottom: 30px; }
  #custom-edit #item-part,
  #custom-edit #item-options { width: 25%; }
  #custom-edit #item-part .list .box { height: 150px; }
}
@media only screen and (max-width:991px) {
  #item-view,
  #custom-edit { min-height: auto }
  #item-view .list .slick-slide img { max-width: 100%; }
  #custom-edit #item-part .list { overflow-x: scroll; }
  #custom-edit #item-part .list .box { height: 100px; }
  .g-wrap#custom-edit #item-view { width: 100%; display: block; position: relative; }
  #custom-edit #item-part { width: 100%; display: block; position: fixed; bottom: 0; top: auto; border-left: 0; box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5); }
  #custom-edit #item-options { width: 100%; display: none; border-left: 0; box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5); }
  #custom-edit #item-part .list .box { width: calc(100%/6 - 10px); margin: 5px; }
  #item-options .list .box { width: calc(100%/8 - 6px); }
  #item-options .list .box .boxlink .icon { width: 50px; border-width: 3px; }
  #custom-edit #item-part.is-open { top: auto; bottom: 0; }
  #custom-edit #item-options.is-open { top: auto; bottom: 0; }
  #custom-edit #item-options.is-close { top: auto; bottom: -100%; }
  #custom-edit #item-part.is-close { top: auto; bottom: -100%; }
}
@media only screen and (max-width:640px) {
  #custom-edit .title { margin: 10px auto; }
  #custom-edit #item-part .list .box { width: calc(100%/4 - 10px); }
  #item-options .list .box { width: calc(100%/5 - 6px); }
  #item-options .list .box .boxlink .icon { width: 40px; }
}

/* @media only screen and (max-width: 320px) {
 *  #custom-edit #item-part .list .box{width: calc(100%/3 - 5px);}
 *  #custom-edit .color-nav .item{ width: calc(100%/4 - 6px) }
 *} */

/* keyframe */
@-webkit-keyframes ani_sideAreaIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-moz-keyframes ani_sideAreaIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes ani_sideAreaIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes ani_sideAreaOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@-moz-keyframes ani_sideAreaOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@keyframes ani_sideAreaOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}

/* form */
#news-view { background: #f1f1f1; overflow: visible; padding: 80px 0 50px;}
#news-view .p-pager{ margin: 15px 0; }
#news-view .form .field-wrap { font-size: 0; margin: 0 -15px; }
#news-view .form .field-wrap.center { text-align: center; margin: 50px 0; }
#news-view .form .field { border: 1px solid #ddd; background: #fff; display: inline-block; width: calc(50% - 30px); vertical-align: middle; margin: 0 15px 15px; }
#news-view .form .field.full { width: calc(100% - 30px); }
#news-view .form .field.full.textarea dd { width: 100% }
#news-view .form .field.full.textarea .replay-name{ margin-left: 10px }
#news-view .form .field dt { display: inline-block; font-size: 1rem; font-weight: normal; color: #000; padding: 0 0px; vertical-align: top; }
#news-view .form .field strong { display: inline-block; color: #ff9100; margin-right: 10px; }
#news-view .form .field.inq dt { padding: 0; }
#news-view .form .field dd { font-size: 1rem; position: relative; display: inline-block; min-width: calc( 100% - 100px); vertical-align: top; }
#news-view .form .field dt.hidden + dd { width: calc(100% - 0px); }
#news-view .form .field .input { display: inline-block; width: auto; max-width: calc(100% - 64px); /* height: 44px; */ font-size: 1rem; border: 0; background: transparent; vertical-align: top; padding: 0 10px; }
#news-view .form .field .go-pofile { color: #666; border-bottom: 1px solid #666; font-size: 0.9375rem; display: inline-block; }
#news-view .form .field .input.buyer { width: calc(100% - 155px); margin-right: 10px; }
#news-view .form .field .input.more { width: 200px; margin-left: 10px; }
#news-view .form .field .textarea { display: block; width: 100%; min-height: 120px; line-height: 20px; font-size: 1rem; border: 0; padding: 9px 10px; background: transparent; }
#news-view .form .field .input:focus,
#news-view .form .field .select:focus,
#news-view .form .field .textarea:focus { border-color: #ff9100; }
#news-view .form .field.btn-wrap { border: 0; background: transparent; display: block; width: 100%; margin: 0 auto 20px; }
#news-view .form .field.no-border { background: transparent; border: 0; }
#news-view .form .field.no-border dt { padding-left: 0; width: 140px }
#news-view .form .field.no-border dd{ min-width: calc( 100% - 140px); }
#news-view .form .field.no-border .input { background: transparent; border: 0; }
#news-view .btn-submit { background: #555555; border: 0; border-radius: 5px; width: auto; padding: 0 10px; height: 38px; line-height: 38px; color: #fff; border: 0; font-size: 1rem; display: inline-block; text-align: center; }
#news-view .btn-submit.fl-right{ float: right }
#news-view .btn-submit.fl-left{ float: left }
#news-view .btn-replay { background: #fff; border: 1px solid #555; border-radius: 5px; width: 105px; height: 36px; line-height: 36px; padding: 0px; float: right; color: #555; }
#news-view .view-wrap { background: #fff; padding: 50px 6%; font-size: 0; }
#news-view .view-wrap .top-box { border-bottom: 1px solid #ccc; padding-bottom: 30px; margin-bottom: 30px; position: relative; }
#news-view .view-wrap .ti-box { display: inline-block; vertical-align: top; font-size: 1rem; vertical-align: bottom; }
#news-view .view-wrap .share-box { display: inline-block; vertical-align: top; font-size: 1rem; vertical-align: bottom; position: absolute; right: 0; bottom: 20px; }
#news-view .h2 { font-size: 1.65rem; text-align: left; }
#news-view .h2:before { display: none; }
#news-view .view-wrap .ti-box .date { display: inline-block; vertical-align: middle; }
#news-view .view-wrap .ti-box .class { display: inline-block; vertical-align: middle; line-height: 36px; height: 36px; border-radius: 36px; padding: 0 30px; border: 1px solid #666; margin-right: 10px; color: #666 }
#news-view .view-wrap .ti-box .date { color: #666; font-size: 0.875rem; }
#news-view .view-wrap .ti-box .date { display: inline-block; margin: 0 7px 5px 0; font-size: 0.875rem; color: #888; }
#news-view .view-wrap .ti-box .date:before { display: inline-block; margin-right: 10px; vertical-align: middle; }
#news-view .view-wrap .ti-box .view { font-size: 0.875rem; margin: 0 7px 5px 0; color: #a0a0a0; display: inline-block; }
#news-view .view-wrap .ti-box .view.hot{ color: #FF5722; }
#news-view .view-wrap .ti-box .view:before{ content: ""; display: inline-block; margin-right: 2.5px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900;  }
#news-view .view-wrap .ti-box .message { font-size: 0.875rem; margin-bottom: 5px; color: #45968f; display: inline-block; }
#news-view .view-wrap .ti-box .message.hot{ color: #9C27B0 }
#news-view .view-wrap .ti-box .message:before{ content: ""; display: inline-block; margin-right: 2.5px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900;  }
#news-view .view-wrap .ti-box .author { font-size: 0.875rem; margin: 0 7px 5px 0; color: #a0a0a0; display: inline-block; }
#news-view .view-wrap .ti-box .author:before{ content: ""; display: inline-block; margin-right: 2.5px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900;  }
#news-view .replay-box { position: relative; z-index: 1; border: 1px solid #ccc; margin: 0 0 25px 0; background: #fff; padding: 36px 6%; font-size: 0.9375rem; line-height: 1.5rem; }
#news-view .replay-box#last-replay-box{ margin-bottom: 80px; }
#news-view .title-box { position: relative; position: relative; width: 100%; height: 54px; padding: 20px 6% ; border: 1px solid #ccc; border-bottom: 0; background: #FFF; margin-top: 50px; }
#news-view .title-box .h3 { margin: 0 0 15px 0; font-weight: bold; font-size: 1.125rem; }
#news-view .title-box .btn-submit{ position: absolute; right: 6%; top: 7px; margin: 0 }
#news-view .replay-box .visitor { position: relative; }
#news-view .replay-box .replay-login-txt { position: absolute; background: url('../images/slash_icon.png') rgba(0, 0, 0, 0.8); color: #fff; width: 100%; height: 100%; left: 0; top: 0; z-index: 11; text-align: center; padding: 10% 0; }
#news-view .replay-box .replay-login-txt .btn-replay-login { display: block; width: 150px; height: 40px; line-height: 40px; background: #45968f; color: #fff; margin: 10px auto; border-radius: 3px; }
#news-view .replay-box .visitor .h3 { margin: 0 0 15px 0; font-weight: bold; font-size: 1.125rem; }
#news-view .replay-box .visitor .quantity { position: absolute; right: 0; top: 0; }
#news-view .replay-box.message { padding: 20px 0; position: relative; z-index: initial;}
#news-view .message .top-box {  width: calc(100% - 12%); margin: 20px 6%; text-align: right}
#news-view .message .top-box .num,
#news-view .message .top-box .name,
#news-view .message .top-box .date { display: inline-block; font-size: 1rem; }
#news-view .message .top-box .num { color: #888; display: inline-block; position: absolute; right: 20px; top: 10px; color: #ccc; }
#news-view .message .top-box .name { font-weight: bold; font-size: 1rem; float: left; }
#news-view .message .top-box .date { color: #888;}
#news-view .message .mid-box { margin-bottom: 20px; width: calc(100% - 12%); margin: 20px 6%; }
#news-view .message .mid-box .left-content,
#news-view .message .mid-box .right-btn { display: inline-block; vertical-align: top; }
#news-view .message .mid-box .left-content { width: calc(100% - 225px); float: left; word-break: break-all; }
#news-view .message .mid-box .right-btn { position: relative; width: 225px; }
#news-view .message .mid-box .right-btn .btn-replay { width: 70px; margin-left: 5px; text-align: center; }
#news-view .message .bot-box { width: 88%; margin: 0 auto;}
#news-view .message .bot-box .btn-open { margin: 0px auto; color: #666; text-align: center; cursor: pointer; }
#news-view .message .bot-box .btn-open:before { content: '\f078'; font-size: 0.875rem; margin-right: 5px; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#news-view .message .bot-box .btn-open.btn-close { color: #000; }
#news-view .message .bot-box .btn-open.btn-close:before { content: '\f106'; font-size: 0.875rem; margin-right: 5px; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#news-view .message .bot-box .visitor { width: 100%; display: none; }
#news-view .message .bot-box .visitor.open { display: block; }
#news-view .message .bot-box .list { color: #000; font-size: 0.9375rem; line-height: 1.5rem; width: 100%;  }
#news-view .message .bot-box .list .t-row:nth-child(n+6) { display: none; }
#news-view .message .bot-box .list.open .t-row:nth-child(n+6) { display: inline-block; }
#news-view .message .bot-box .thead { width: 100%; color: white;  /* display: table; */ }
#news-view .message .bot-box .thead .th { padding: 15px 15px 15px 0; border-right: 3px solid transparent; position: relative; display: none; }
#news-view .message .bot-box .tbody .t-row { width: 100%; padding: 0 20px; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; text-align: right; display: inline-block; border: 1px solid #ddd; margin: 10px 0; }
#news-view .message .bot-box .tbody .t-row .td { padding: 10px 15px 10px 0; vertical-align: top; display: inline-block; }
#news-view .message .bot-box .tbody .t-row .td.t-name { padding-top: 20px; width: calc(100% - 154px); font-weight: bold; text-align: left; font-size: 1rem; }
#news-view .message .bot-box .tbody .t-row .td.t-cont { float: left; padding-bottom: 20px; width: calc(100% - 68px - 68px - 82px); padding-right: 0; text-align: left; text-align: justify; }
#news-view .message .bot-box .tbody .t-row .td.t-replay { padding-right: 0; width: 60px; }
#news-view .message .bot-box .tbody .t-row .td.t-replay .icon-replay { cursor: pointer; color: #888; display: inline-block; }
#news-view .message .bot-box .tbody .t-row .td.t-replay .icon-replay.on { color: #45968f }
#news-view .message .bot-box .tbody .t-row .td.t-replay .icon-replay:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: ""; display: inline-block; margin-right: 5px; }

#news-view .message .bot-box .tbody .t-row .td.t-del { width: 64px;  }
#news-view .message .bot-box .tbody .t-row .td.t-del .icon-del { cursor: pointer; color: #888; display: inline-block; }
#news-view .message .bot-box .tbody .t-row .td.t-del .icon-del.on { color: #45968f }
#news-view .message .bot-box .tbody .t-row .td.t-del .icon-del:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: ""; display: inline-block; margin-right: 5px; }

#news-view .message .bot-box .tbody .t-row .td.t-edit { position: relative; width: 82px;  }
#news-view .message .bot-box .tbody .t-row .td.t-edit .icon-edit { cursor: pointer; color: #888; display: inline-block; }
#news-view .message .bot-box .tbody .t-row .td.t-edit .icon-edit.on { color: #45968f }
#news-view .message .bot-box .tbody .t-row .td.t-edit .icon-edit:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: ""; display: inline-block; margin-right: 5px; }

#news-view .message .bot-box .tbody .t-row .td.t-time { width: 150px; color: #888; padding-right: 0; text-align: right; }
#news-view a.replay-name { color: #45968f; font-size: 1rem; font-weight: bold; display: inline-block; margin-right: 5px; }
#news-view .extended { background: #fff; width: 100%; padding: 50px 0; }
#news-view .extended .h2 { text-align: left; letter-spacing: 2px; font-family: "Roboto"; margin-bottom: 25px; text-transform: uppercase; font-weight: normal; }
#news-view .extended .list { font-size: 0; margin: 0 -2%; }
#news-view .extended .item { font-size: 0; display: inline-block; vertical-align: top; width: calc(100%/3 - 4%); margin: 0 2%; position: relative; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; background: #f9f9f9; }
#news-view .extended .item:after { content: ""; }
#news-view .extended .item .pic { position: relative; display: block; overflow: hidden; font-size: 1rem; }
#news-view .extended .item .pic img { width: 100%; -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); }
#news-view .extended .item .txt { padding: 33px 30px; overflow: hidden; font-size: 1rem; }
#news-view .extended .item .txt .h3 { position: relative; color: #333; font-size: 1.125rem; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; margin: 0 0 10px 0; z-index: 1; overflow: hidden; }
#news-view .extended .item .txt .date { font-size: 0.8125rem; color: #858585; position: relative; z-index: 2; }
#news-view .extended .item .txt .des { color: #555; line-height: 1.6rem; font-size: 0.9375rem; overflow: hidden; margin-top: 19px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 5rem; }
@media (min-width:992px) {
  #news-view .message .mid-box .left-content .post-img img{ max-width: 800px!important; max-height: 600px!important }
  #news-view .message .bot-box .tbody .t-row .td.t-replay .icon-replay:hover,
  #news-view .message .bot-box .tbody .t-row .td.t-del .icon-del:hover,
  #news-view .message .bot-box .tbody .t-row .td.t-edit .icon-edit:hover { color: #45968f }
  #news-view .message .bot-box .btn-open:hover { color: #45968f }
  #news-view .btn-submit:hover { background: #000; }
}
@media (max-width:991px) {
  #news-view .message .mid-box .left-content .post-img img{ max-width: 680px!important; max-height: 480px!important }
  #news-view .form { width: 90%; margin-top: -50px; width: 100%; border-radius: 0 0 5px 5px; margin-top: 0; }
  #news-view .form .field-wrap { margin: 0; }
  /* #news-view .form .field.no-border .input{ padding: 0; } */
  #news-view .form .field { display: block; width: 100%; margin: 0 0 20px; border: 0; }
  #news-view .form .field.full { display: block; width: 100%; margin: 0 0 20px; border: 0; }
  #news-view .form .field dt { /*float: none;  width: 100%; padding: 0; */ margin-bottom: 0; line-height: 30px; }
  #news-view .form .field dt strong { width: auto; }
  #news-view .form .field dd { /* float: none; width: 100%; */ border: 1px solid #ddd; background: #fff; }
  #news-view .form .field .g-btn.submit { float: none; display: block; margin: 0 auto; }
  #news-view .replay-box .replay-login-txt { padding: 15% 0; }
  #news-view .form .field.no-border dd { background: transparent; border: 0; height: 30px; line-height: 30px;}

}
@media (max-width:679px) {
    #news-view .message .mid-box .left-content .post-img img{ max-width: 100%!important; max-height:auto!important }
}
@media (max-width:639px) {
  #news-view .replay-box{ padding: 30px;}
  #news-view .replay-box .replay-login-txt { padding: 20% 0; }
}

/* News View */

/* Replay */
@media (min-width:992px) {
  #news-view .message .bot-box .tbody .t-row:hover { background: #e7eaea; }
  #news-view .message .bot-box .tbody .t-row:hover .td.t-replay { color: #45968f; }
  #news-view .btn-replay:hover { color: #fff; background: #45968f; border-color: #45968f; }
}
@media (max-width:991px) {
  #news-view .h2 { font-size: 1.625rem; font-weight: bold; text-align: left; }
  #news-view .view-wrap .share-box { bottom: 10px; }
  #news-view .view-wrap .top-box { padding-bottom: 11px; }
  #news-view .message .mid-box .left-content { width: 100%; display: block; margin-bottom: 10px; }
  #news-view .message .mid-box .right-btn { float: right }
  #news-view .message .bot-box .list { padding: 20px; }
  #news-view .message .bot-box .thead { display: none; }
  #news-view .message .bot-box .tbody .t-row { position: relative; padding-top: 10px }
  #news-view .message .bot-box .tbody .t-row .td { text-align: left; }
  #news-view .message .bot-box .tbody .t-row .td.t-name,
  #news-view .message .bot-box .tbody .t-row .td.t-cont,
  #news-view .message .bot-box .tbody .t-row .td.t-time { display: inline-block; vertical-align: top; text-align: left; padding: 5px 0; }
  #news-view .message .bot-box .tbody .t-row .td.t-name { display: block; width: calc(100% - 200px); }
  #news-view .message .bot-box .tbody .t-row .td.t-cont { padding: 15px 0; width: 100%; /* border-top: 1px solid #ddd;  */ }
  #news-view .message .bot-box .tbody .t-row .td.t-del,
  #news-view .message .bot-box .tbody .t-row .td.t-edit,
  #news-view .message .bot-box .tbody .t-row .td.t-replay {text-align: right; padding-right: 0 }
  #news-view .message .bot-box .tbody .t-row .td.t-time { width: 140px; text-align: right; position: absolute; right: 20px; top: 10px; padding: 0; }
  #news-view .form .field { background: transparent; }
  #news-view .form .field.full { background: transparent; }
  #news-view .btn-submit { float: none; margin: 0 auto; }
  #news-view .extended .item .txt .h3 { margin-bottom: 0 }
  #news-view .extended .item .txt { padding: 20px; }
  #news-view .extended .item .txt .des { margin-top: 5px; }
}
@media (max-width:640px) {
  #news-view .h2{ font-size: 1.25rem; }
  #news-view .view-wrap { padding: 30px 6%; margin-top: 80px; }
  #news-view .view-wrap .ti-box .class { height: 28px; line-height: 28px; padding: 0 10px; }
  #news-view .view-wrap .share-box { position: relative; display: block; width: 100%; bottom: 0; margin-top: 7px; }
  #news-view .form .field.full.textarea { border: 1px solid #ddd; }
  #news-view .form .field.full.textarea dt { padding-left: 8px; background: #fff; }
  #news-view .form .field.full.textarea dd { border: 0; }
  #news-view .message .top-box { position: relative; margin: 0 6%; padding-top: 30px; }
  #news-view .message .top-box .num{ right: 0;}
  #news-view .message .top-box .date { position: absolute; top: 30px; right: 0px; font-size: 0.875rem; }
  #news-view .message .mid-box .left-content { width: 100%; display: block; }
  #news-view .message .mid-box .right-btn { width: 100%; display: inline-block; text-align: right }
  #news-view .message .mid-box .right-btn .btn-replay {  display: inline-block; width: auto; padding: 0 5px; height: 30px; line-height: 30px; }
  #news-view .message .bot-box .tbody .t-row {  margin-bottom: 10px; }
  #news-view .message .bot-box .tbody .t-row .td.t-del,
  #news-view .message .bot-box .tbody .t-row .td.t-edit,
  #news-view .message .bot-box .tbody .t-row .td.t-replay { width: auto; }
  #news-view .message .bot-box .tbody .t-row .td.t-del .icon-del,
  #news-view .message .bot-box .tbody .t-row .td.t-edit .icon-edit,
  #news-view .message .bot-box .tbody .t-row .td.t-replay .icon-replay { width: auto; font-size: 0.875rem; text-align: center; color: #45968f; border: 1px solid #45968f; border-radius: 3px; height: 28px; padding: 0 5px; line-height: 25px; }
  #news-view .message .bot-box .tbody .t-row .td.t-del .icon-del:before,
  #news-view .message .bot-box .tbody .t-row .td.t-edit .icon-edit:before,
  #news-view .message .bot-box .tbody .t-row .td.t-replay .icon-replay:before { display: none; }
  #news-view .message .bot-box .tbody .t-row .td.t-time { font-size: 0.875rem; width: 130px; }
  #news-view .message .bot-box .tbody .t-row .td.t-cont { padding: 15px 0 25px 0; }
  #news-view .message .bot-box .tbody .t-row .td.t-name{ width: 100%; padding: 0; }
  #news-view .extended .h2 { font-size: 1.625rem; }
  #news-view .extended .item { width: 100%; margin: 0 auto 10px; }
  #news-view .extended .item .pic,
  #news-view .extended .item .txt { display: inline-block; vertical-align: top; }
  #news-view .extended .item .pic { width: 30%; }
  #news-view .extended .item .txt { width: 70%; padding: 10px 20px; }
  #news-view .extended .item .txt .h3 { margin-bottom: 5px; font-size: 1.125rem; }
  #news-view .extended .item .txt .des { margin-top: 0; -webkit-line-clamp: 2; }
  #news-view .extended { padding: 50px 15px; }
  #news-view .extended .item .txt .des { height: 3rem; }
}
@media (max-width:480px) {
  #news-view .replay-box.message{ padding: 0 0 10px 0; }
  #news-view .extended .item .txt .des { margin-top: 0; -webkit-line-clamp: 1; }
}
@media (max-width:320px) {
  #news-view .message .bot-box .tbody .t-row { border-bottom: 1px solid #ddd; }
}
/* Upload Img */
#news-view .img-link-wrap{ max-width: 400px; position: relative; text-align: left;z-index: 10 }
#news-view .img-link-wrap .btn-img-link{background: #fff; border: 1px solid #ccc; border-radius: 5px; height: 34px; line-height: 32px; margin-bottom: 10px; color: #666; padding: 0px 16px; font-size: 1rem; display: inline-block; text-align: center; cursor: pointer; float: left;}
#news-view .img-link-wrap .img-link-box { display: none; position: absolute; top: 40px; font-size: 0; width: 400px; background: #fff; border: 10px solid #ccc; padding: 30px 20px; text-align: center }
#news-view .img-link-wrap .img-link-box:before { content: ''; position: absolute; left: 10px; top: -30px; border-style: solid; border-color: transparent transparent #ccc transparent; border-width: 10px }
#news-view .img-link-wrap .img-link-box >* { display: inline-block; vertical-align: middle; font-size: 1rem; }
#news-view .img-link-wrap .img-link-box .ti { line-height: 34px; width: 70px; }
#news-view .img-link-wrap .img-link-box .txt { height: 32px; line-height: 30px; width: calc(100% - 70px - 60px - 10px); overflow: hidden }
#news-view .img-link-wrap .img-link-box .btn { width: 60px; margin-left: 10px; color: #666; background: #efefef; text-align: center; color: #666; padding: 0; height: 30px; line-height: 30px; }
#news-view .img-link-wrap .img-link-box .close { position: absolute; right: 10px; top: 10px; }
#news-view .img-link-wrap .img-link-box .post-img-box { }
#news-view .img-link-wrap .img-link-box .post-img-box img { width: 100%; }
@media (min-width:992px) {
  #news-view .img-link-wrap .btn-img-link:hover{ color: #fff; background: #666; border: 1px solid #666;}
}

@media (max-width: 640px) {
  #news-view .img-link-wrap .img-link-box{ top: 43px; }
}
@media (max-width:480px) {
  #news-view .img-link-wrap,
  #news-view .img-link-wrap .img-link-box{ width: calc(90vw - 40px); }
  #news-view .img-link-wrap .img-link-box .ti{
    display: block;
  }
  #news-view .img-link-wrap .img-link-box{
    padding: 10px 15px;
  }
  #news-view .img-link-wrap .img-link-box .txt{ width: calc(100% - 60px - 10px); }
}

/* Update text */
#news-view .edit-box { display: none; position: absolute;right: 0; top: 45px;  font-size: 0; width: 400px; background: #fff; border: 10px solid #ccc; padding: 30px 20px 20px; text-align: center; z-index: 10 }
#news-view .edit-box:before { content: ''; position: absolute; right: 10px; top: -30px; border-style: solid; border-color: transparent transparent #ccc transparent; border-width: 10px }
#news-view .edit-box textarea{ width: 100%; font-size: 1rem; }
#news-view .edit-box .btn-sub { font-size: 1rem; width: 60px; border-radius: 5px ; float: right; background: #333; text-align: center; color: #fff; padding: 0; height: 30px; line-height: 30px; cursor: pointer }
#news-view .edit-box .close { position: absolute; right: 10px; top: 10px; font-size: 0.9375rem; }
#news-view .message .mid-box .right-btn .edit-box:before{ right: 90px; }

@media (max-width: 640px) {
  #news-view .edit-box{ width: 300px; right: calc(300px - 100vw); }
  #news-view .edit-box:before { right: 70px; }
  #news-view .message .mid-box .right-btn .edit-box{ right: 0; }
  #news-view .message .mid-box .right-btn .edit-box:before{ right: 70px;  }
}

/*=====================  Sitemap ========================== */
#sitemap .h2 span.en { display: block; font-size: 3rem; letter-spacing: 3px; font-family: "Roboto Thin"; margin-bottom: 10px; }
#sitemap .h2 span.ch { display: block; font-size: 1.875rem; letter-spacing: 6px; font-weight: bold; }
#sitemap .h2:before { display: none; }
#sitemap .list { font-size: 0; margin: 29px 0 50px; padding: 60px 20px 20px; border-radius: 10px; }
#sitemap .item { font-size: 1rem; display: inline-block; width: calc(100%/3 - 100px); margin: 0 50px 50px; vertical-align: top; }
#sitemap .item .first { font-size: 1.4375rem; line-height: 50px; border-bottom: 1px solid #999; color: #000; font-weight: bold; }
#sitemap .item ul { margin: 0; padding: 0; list-style: none; }
#sitemap .item li { transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
#sitemap .item li > a { font-size: 0.9375rem; color: #000; font-weight: bold; width: 100%; position: relative; display: inline-block; line-height: 50px; }
#sitemap .item .second { position: relative; font-size: 0.9375rem; color: #000; font-weight: bold; width: 100%; position: relative; display: inline-block; line-height: 45px; border-bottom: 1px solid #ddd; }
#sitemap .item .second:after { content: ""; display: block; position: absolute; right: 5px; top: 20px; width: 7px; height: 7px; border-style: solid; border-width: 2px 2px 0 0; border-color: #222; transform: rotate(45deg); }
#sitemap .item .first + .second { margin-bottom: 15px; }
#sitemap .item li > ul { border-bottom: 1px solid #ddd; }
#sitemap .item li > ul > li { border-bottom: 0; }
#sitemap .item li > ul > li > a { background: none; color: #666; line-height: 30px; }
#sitemap .item li > ul > li > ul { border-bottom: 0; }
#sitemap .item li > ul > li > ul > li { padding-left: 10px; }
#sitemap .item li > ul > li > ul > li > a:before { content: "-"; display: inline-block; vertical-align: middle; margin-right: 5px; }
@media only screen and (min-width:1200px) {
  #sitemap .item li > a:hover { color: #000; }
  #sitemap .item .second:hover { color: #666; }
}
@media only screen and (max-width:1199px) {
  #sitemap .item { width: calc(100%/3 - 40px); margin: 0 20px 20px; }
}
@media only screen and (max-width:991px) {
  #sitemap .list { padding-bottom: 30%; }
  #sitemap .item { width: calc(100%/2 - 20px); margin: 0 10px 30px; }
}
@media only screen and (max-width:640px) {
  #sitemap .item { display: block; width: calc(100% - 20px); }
}
.member-welcome,
.member-funcs .box,
#member-nav,
.btn-open-mnav { border-radius: 10px; background: #fff; overflow: hidden; }

/* Member Golbal */
.wrap-1500 { max-width: 1530px; width: 100%; margin: 0 auto; padding-left: 15px; padding-right: 15px; position: relative; }
.btn-theme { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #696969; background-color: #696969; color: #fff; overflow: hidden; }
.btn-theme:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.btn-theme:link { color: #fff; }
.btn-theme:link:hover { color: #fff; }
.btn-theme:hover { color: #fff; background: #333; border-color: #333; }
.btn-theme:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.btn-theme.login { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #222; background-color: #222; color: #fff; overflow: hidden; width: 100%; display: block; max-width: none; margin: 10px 0; }
.btn-theme.login:focus{color: #fff; background: #44afa6; border-color: #44afa6; }
.btn-theme.login:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.btn-theme.login:link { color: #fff; }
.btn-theme.login:link:hover { color: #fff; }
.btn-theme.login:hover { color: #fff; background: #44afa6; border-color: #44afa6; }
.btn-theme.login:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.btn-theme.btn-certi { height: 35px; line-height: 35px; border-color: #999; background-color: transparent; color: #666; width: 150px; margin-bottom: 5px;}
.btn-theme.btn-certi:hover { border-color: #999; background-color: #999; color: #fff; }
.btn-theme.regist { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #222; background-color: transparent; color: #222; overflow: hidden; width: 100%; display: block; max-width: none; margin: 10px 0; }
.btn-theme.regist:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.btn-theme.regist:link { color: #222; }
.btn-theme.regist:link:hover { color: #fff; }
.btn-theme.regist:hover { color: #fff; background: #666; border-color: #666; }
.btn-theme.regist:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.btn-theme.send { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #222; background-color: #222; color: #fff; overflow: hidden; width: calc(50% - 14px); max-width: 205px; margin-left: 5px; }
.btn-theme.send:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.btn-theme.send:link { color: #fff; }
.btn-theme.send:link:hover { color: #fff; }
.btn-theme.send:hover { color: #fff; background: #000; border-color: #000; }
.btn-theme.send:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.btn-theme.reset { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #222; background-color: #fff; color: #222; overflow: hidden; width: calc(50% - 14px); max-width: 160px; }
.btn-theme.reset:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.btn-theme.reset:link { color: #222; }
.btn-theme.reset:link:hover { color: #fff; }
.btn-theme.reset:hover { color: #fff; background: #666; border-color: #666; }
.btn-theme.reset:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
@media (max-width: 991px) {
  .btn-theme.btn-certi{ width: auto; font-size: 0.8rem; padding: 0 5px;}
}
@media (max-width:639px) {
  .btn-theme { height: 40px; line-height: 40px; }
}
.color-gray { color: #999; }
.btn-wrap--line { border-top: 1px solid #ddd; margin: 20px auto; padding: 25px 0 0 0; text-align: center; }
.btn-wrap--line.text-right { text-align: right; }
.form-bottom { font-size: 0; }
.form-bottom .form-box.code { width: calc(50% - 27px); margin-right: 27px; font-size: 1rem; display: inline-block; vertical-align: top; }
.form-bottom .form-box.code .label-style{font-size: 14px; }
.form-bottom .btn-wrap { width: 50%; font-size: 1rem; display: inline-block; vertical-align: top; text-align: right; }
.form-bottom .btn-wrap .btn-theme { width: calc(50% - 8px); max-width: 160px; }
@media (max-width:767px) {
  .form-bottom .form-box.code { width: 100%; margin-right: auto; display: block; }
  .form-bottom .btn-wrap { width: 100%; display: block; text-align: center; border-top: 1px solid #eee; padding-top: 30px; margin-top: 30px; }
  .btn-wrap--line.text-right { text-align: center; }
}
.form-sec { border-top: 1px solid #ddd; padding: 20px 0 10px 0; margin: 20px auto; }
.form-sec:first-of-type { border-top: none; padding: 0 0 10px 0; margin: 0 0 20px 0; }
.form-sectit { font-size: 1.125rem; font-weight: 600; margin: 0 0 20px 0; padding: 0; }
.form-sectit small.color-green { font-size: 1rem; font-weight: 400; display: inline-block; color: #44afa6; margin-left: 3px; }
.form-box-autowidth { margin: 0 0 20px 0; font-size: 1rem; position: relative; }
.form-box-autowidth .form-gp { position: relative; top: auto; left: auto; width: auto; display: inline-block; vertical-align: middle; }
.form-box-autowidth .form-gp .radio-theme { margin-right: 20px; }
.form-box-autowidth .label-style { position: relative; margin-right: 10px; top: auto; left: auto; width: auto; display: inline-block; vertical-align: middle; }
.form-box-autowidth .notice { color: #999; }
.form-box.form-account .form-gp { font-size: 0; display: block; width: 100%; position: relative; top: auto; right: auto; }
.form-box.form-account .input-ac1,
.form-box.form-account .input-ac2 { width: calc(25% - 5px); display: inline-block; margin-right: 10px; font-size: 1rem; }
.form-box.form-account .input-ac3 { width: calc(50% - 10px); display: inline-block; font-size: 1rem; }
@media (max-width:991px) {
  .form-box-autowidth .label-style { line-height: 1.5; margin: 0 auto 10px auto; text-align: left; display: block; }
  .form-box-autowidth .form-gp { border: 1px solid #ddd; border-radius: 5px; padding: 0 10px; display: block; }
  .form-box-autowidth .notice { display: block; width: 100%; line-height: 1.3; color: #666; font-size: 0.875rem; border-radius: 5px; background: #f6f6f6; padding: 10px; margin: 5px 0 0 0; }
}
@media (max-width:767px) {
  .form-box.form-account .input-ac1,
  .form-box.form-account .input-ac2 { width: calc(50% - 5px); margin-bottom: 15px; margin-right: 10px; }
  .form-box.form-account .input-ac2 { margin-right: 0; }
  .form-box.form-account .input-ac3 { width: 100%; display: block; }
}
@media (max-width:599px) {
  .form-box.form-account .input-ac1,
  .form-box.form-account .input-ac2 { width: 100%; display: block; margin-right: 0; }
}

/* No Data */
.msg-construct { text-align: center; margin: 50px auto; }
.msg-construct .text { display: block; font-size: 1.125rem; color: #666; font-weight: 600; margin: 0 auto 25px auto; }
.msg-construct .text:before { content: ""; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; font-size: 2.8rem; line-height: 100px; display: block; background: #eee; color: #aaa; border-radius: 50%; width: 100px; height: 100px; margin: 0 auto 10px auto; }
.msg-construct .btn-theme { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: transparent; background-color: transparent; color: #999; overflow: hidden; line-height: 35px; height: 35px; width: auto; padding: 0; overflow: visible; border-bottom: 1px solid #999; }
.msg-construct .btn-theme:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.msg-construct .btn-theme:link { color: #999; }
.msg-construct .btn-theme:link:hover { color: #45968f; }
.msg-construct .btn-theme:hover { color: #45968f; background: transparent; border-color: transparent; }
.msg-construct .btn-theme:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.msg-construct .btn-theme:before { display: none; }
.msg-construct .btn-theme:hover { border-bottom: 1px solid #45968f; }
.msg-construct .btn-theme:hover:before { display: none; }
.msg-please-login { text-align: center; margin: 50px auto; }
.msg-please-login .text { display: block; font-size: 1.125rem; color: #666; font-weight: 600; margin: 0 auto 20px auto; }
.msg-please-login .btn-theme { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: transparent; background-color: transparent; color: #999; overflow: hidden; line-height: 35px; height: 35px; width: auto; padding: 0; overflow: visible; border-bottom: 1px solid #999; }
.msg-please-login .btn-theme:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.msg-please-login .btn-theme:link { color: #999; }
.msg-please-login .btn-theme:link:hover { color: #45968f; }
.msg-please-login .btn-theme:hover { color: #45968f; background: transparent; border-color: transparent; }
.msg-please-login .btn-theme:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.msg-please-login .btn-theme:before { display: none; }
.msg-please-login .btn-theme:hover { border-bottom: 1px solid #45968f; }
.msg-please-login .btn-theme:hover:before { display: none; }

/* FORM - TEXT */
.form-notice { margin-bottom: 15px; line-height: 1.8; font-style: normal; }
.form-notice a { color: #222; text-decoration: none; }
.form-notice a:hover { text-decoration: underline; }
.form-notice.form-mustfill { position: absolute; top: 0; right: 15px; margin-top: 15px; }
.form-notice.form-half { display: inline-block; vertical-align: top; width: calc(50% - 27px); line-height: 45px; margin: 0; font-size: 14px;}
@media (max-width:1199px) {
  .form-notice.form-half { width: calc(50% - 12px); }
}
@media (max-width:991px) {
  .form-notice.form-mustfill { top: 50px; }
}
@media (max-width:767px) {
  .form-notice.form-half { display: block; width: calc(100% - 115px); line-height: 1.3; color: #666; font-size: 0.875rem; border-radius: 5px; background: #f6f6f6; padding: 10px; margin: -10px 0 15px 115px; }
  .form-notice.form-mustfill { font-size: 0.75rem; }
}
@media (max-width:499px) {
  .form-notice.form-half { width: 100%; margin: -10px 0 15px 0; }
  .form-notice.form-mustfill { position: relative; top: auto; right: auto; line-height: 1; padding: 0; margin: 0; text-align: right; }
}

/* FORM - BOX */
.form-box { display: block; position: relative; margin: 0 auto 15px auto; padding: 0 0 0 160px; line-height: 3rem }
.form-box.form-sex { padding-right: 249px; }
.form-box.form-sex .input-style{ width: calc(50% - 4px);
    display: inline-block;
    margin-bottom: 5px; }
.form-box.form-half { display: inline-block; vertical-align: top; width: calc(50% - 27px); }
.form-box.form-half.odd { margin-right: 50px; }
.form-box.form-half.odd.p-l{
  padding: 0 0 0 170px;
}
.form-box.form-half.even { margin-right: 0; }

.form-box.form-address .form-gp { position: relative; width: 100%;/*  padding-left: 158px; */ }
.form-box.form-address .form-gp .select-area { /* position: absolute; top: 0; left: 0; width: 150px; */  margin-bottom: 10px; }
.form-box.form-address .form-gp .address_area_tw { font-size: 0; }
.form-box.form-address .form-gp .address_area_tw .select-style { font-size: 1rem; display: inline-block; vertical-align: top; margin-right: 8px; width: calc((100% / 3) - 8px); margin-bottom: 4px }
.form-box.form-address .form-gp .address_area_tw .input-style{ margin-bottom: 4px; display: inline-block;  margin-right: 8px;  width: calc((100% / 3) - 8px);}
.form-box.form-address .form-gp .address_area_tw .input-style.size-s { font-size: 1rem; display: inline-block; vertical-align: top; margin-right: 8px; width: calc((100% / 3) - 8px); }
.form-box.form-address .form-gp .address_area_tw .input-style.size-l { font-size: 1rem; display: inline-block; vertical-align: top; width: calc((100% / 3) * 2); }
.form-box.form-address .form-gp .address_area_foreign { font-size: 0; }
.form-box.form-address .form-gp .address_area_foreign .select-style { font-size: 1rem; display: inline-block; vertical-align: top; margin-right: 8px; width: calc((100% / 6) - 8px); }
.form-box.form-address .form-gp .address_area_foreign .input-style { font-size: 1rem; display: inline-block; vertical-align: top; width: calc((100% / 6) * 5); }
.form-gp { min-height: 45px; line-height: 45px; width: 239px; position: absolute; top: 0; right: 0; }
.form-gp--pwd { position: relative; }
.form-gp--pwd .input-style { padding-right: 50px; }
.btn-showpwd { position: absolute; display: inline-block; width: 40px; top: 0; bottom: 0; text-align: center; font-size: 0; right: 0; bottom: 0; color: #ccc; }
.btn-showpwd:before { content: ""; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; display: inline-block; font-size: 1.2rem; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.btn-showpwd.is-show:before { content: ""; }
.btn-showpwd:visited,
.btn-showpwd:link,
.btn-showpwd:focus { color: #ccc; }
.btn-showpwd:hover,
.btn-showpwd:active { color: #666; }
@media (max-width:1199px) {
  .form-box.form-sex { padding-right: 190px; }
  .form-box.form-sex .form-gp { width: 190px; font-size: 0; }
  .form-box.form-sex .form-gp .radio-theme { width: 33.3333%; position: relative; margin: 0 0 -1px -1px; white-space: nowrap; color: #333; text-align: center; font-size: 0.9375rem; }
  .form-box.form-sex .form-gp .radio-theme input + span { position: absolute; z-index: -1; margin: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; border: 1px solid #ddd; background: #eee; }
  .form-box.form-sex .form-gp .radio-theme input + span i { display: none; }
  .form-box.form-sex .form-gp .radio-theme input:checked + span { background: #666; border: 1px solid #ddd; }
  .form-box.form-sex .form-gp .radio-theme.is-check { color: #fff; border: 1px solid #666; z-index: 1; }
  .form-box.form-sex .form-gp .radio-theme:not(.is-check) { z-index: 0; }
  .form-box.form-half { width: calc(50% - 12px); }
  .form-box.form-half.odd { margin-right: 20px; }
  .form-box.form-half.even { margin-right: 0; }
  .form-box.form-address .form-gp { /* padding-left: 108px; */ }
  .form-box.form-address .form-gp .select-area { width: 100%; }
  .form-box.form-address .form-gp .address_area_tw .select-style { width: calc((100% / 2) - 8px); margin-bottom: 4px; }
  .form-box.form-address .form-gp .address_area_tw .input-style{ width: calc((100% / 2) - 8px); margin-bottom: 4px; }
  /* .form-box.form-address .form-gp .address_area_tw .input-style.size-s { width: calc((100% / 3)); margin-bottom: 10px; margin-right: 0; }
  .form-box.form-address .form-gp .address_area_tw .input-style.size-l { display: block; width: 100%; margin-bottom: 10px; } */
  .form-box.form-address .form-gp .address_area_foreign .select-style { width: calc((100% / 3) - 8px); margin-bottom: 10px; }
  .form-box.form-address .form-gp .address_area_foreign .input-style { width: calc((100% / 3) * 2); margin-bottom: 10px; }
}
@media (max-width:767px) {
  .form-box.form-half { display: block; width: 100%; }
  .form-box.form-address .form-gp { padding-left: 0; }
  .form-box.form-address .form-gp .select-area { width: 100%; display: block; position: relative; margin-bottom: 10px; }
  .form-box.form-address .form-gp .address_area_tw .select-style {  display: block; width: calc((100%) - 8px); }
  .form-box.form-address .form-gp .address_area_tw .input-style{  display: block; width: calc((100%) - 8px); }
}
@media (max-width:639px) {
  .form-box.form-sex{ padding-right: 0 }
  .form-box.form-sex .input-style { width:100%;  display: block; }
  .form-box.form-sex .form-gp{ position: relative;width: 100%; }
  .form-box.form-sex .form-gp .radio-theme { line-height: 40px; margin-bottom: 0; vertical-align: top }
  .form-box.form-address .form-gp .address_area_foreign .select-style { width: 100%; margin-right: 0; }
  .form-box.form-address .form-gp .address_area_foreign .input-style { width: 100%; }
}
@media (max-width:499px) {
  .form-box { padding-left: 0; }
  .form-box.form-address .form-gp .address_area_tw .select-style { width: 100%; margin-right: 0; }
  .form-box.form-address .form-gp .address_area_tw .input-style.size-s { width: 100%; }
  .form-box.form-half.odd.p-l{
    padding: unset;
  }
}

/* star */
.star { display: inline-block; font-style: normal; color: #45968f; font-size: 0.9375rem; margin-right: 2px; }
.must-txt { display: none; font-size: 0.875rem; color: #FF5722; position: absolute; left: 135px; top: 7px; }
.must-txt i { margin-right: 3px; font-size: 0.75rem; }

/* CODE */
.form-box.code { padding-right: 120px; }
.codeimg { width: 120px; position: absolute; bottom: 0; right: 0; }
.codeimg img { width: 100%; }
@media (max-width:639px) {
  .form-box.code { padding-right: 106px; }
  .codeimg { width: 106px; }
}
@media (max-width:480px) {
  .must-txt { left: 10px; top: 40px; }
}

/* RADIO */
.radio-theme { padding: 0; z-index: 2; margin: -2px 5px 0 5px; display: inline-block; vertical-align: middle; font-weight: normal; line-height: 45px; }
.radio-theme.error input + span { border: 2px solid #f00; }
.radio-theme input { outline: none; display: none; }
.radio-theme input + span { display: inline-block; vertical-align: middle; border: 2px solid #666; background: #fff; width: 17px; height: 17px; padding: 0; margin: -2px 8px 0 0; border-radius: 50%; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.radio-theme input + span i { display: inline-block; vertical-align: top; margin: 6px 0 0 5px; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -moz-transform: scale(0) rotate(-45deg); -ms-transform: scale(0) rotate(-45deg); -webkit-transform: scale(0) rotate(-45deg); transform: scale(0) rotate(-45deg); -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; }
.radio-theme input:checked + span { border-color: #666; background: #666; }
.radio-theme input:checked + span i { -moz-transform: scale(1) rotate(-45deg); -ms-transform: scale(1) rotate(-45deg); -webkit-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); }
.radio-theme:hover input + span,
.radio-theme:active input + span { border-color: #666; background: #eee; }
.radio-theme:hover input:checked + span,
.radio-theme:active input:checked + span { border-color: #666; background: #666; }
@media (max-width:639px) {
  .radio-theme { line-height: 40px; }
}
.radio-theme--block { padding: 0; margin: 5px 12px 5px 0; display: inline-block; vertical-align: middle; font-weight: normal; position: relative; line-height: 1.2; height: auto; min-height: 45px; text-align: center; width: calc(25% - 16px); font-size: 0.9375rem; }
.radio-theme--block input { outline: none; display: none; }
.radio-theme--block input + span { cursor: pointer; display: block; border: 1px solid #ddd; background: #fff; padding: 13px; margin: 0;  }
.radio-theme--block input:checked + span { border: 2px solid #706e6e; background: #f8f8f8; }
.radio-theme--block input:checked + span:after { content: '\f00c'; font-family: 'Font Awesome 5 Free';color: #ffffff; font-weight: 900; font-size: 0.8rem; position: absolute; right: 3px; bottom: 3px; }
.radio-theme--block input:checked + span:before { content: ''; position: absolute; right: 0; border: 0; display: block; text-align: center;  bottom: 0px; border-style: solid; border-width: 30px 32px 0px 0; border-color: transparent #706e6e transparent transparent; display: block; }
.radio-theme--block input + span .fee { display: block; font-size: 0.9375em; color: red; font-style: normal; }
.radio-theme--block:hover input + span { border-color: #706e6e; }
#getStore{ background: #706e6e; height: 45px; line-height: 45px; border: 0; border-radius: 0; color: #fff; padding: 0 20px; width: calc(25% - 16px); }
@media (max-width:1366px) {
  .radio-theme--block { width: calc(33.33% - 16px);  }
}
@media (max-width:1199px) {
  .radio-theme--block { width: calc(50% - 24px); margin: 0 10px 10px;}
}
@media (max-width:599px) {
  .radio-theme--block { width: 100%; display: block; }
}

/* CHECKBOX */
.checkbox-theme { padding: 0; margin: 0 5px; display: inline-block; font-weight: normal; line-height: 45px; font-size: 1rem; }
.checkbox-theme input { outline: none; display: none; }
.checkbox-theme input + span { display: inline-block; vertical-align: middle; border: 2px solid #666; background: #fff; width: 16px; height: 16px; padding: 0; margin: -3px 8px 0 0; border-radius: 2px; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.checkbox-theme input + span i { display: inline-block; vertical-align: top; margin: 5px 0 0 5px; width: 10px; height: 5px; border-left: 2px solid #333; border-bottom: 2px solid #333; -moz-transform: scale(0) rotate(-45deg); -ms-transform: scale(0) rotate(-45deg); -webkit-transform: scale(0) rotate(-45deg); transform: scale(0) rotate(-45deg); -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; }
.checkbox-theme input:checked + span { border-color: #333; }
.checkbox-theme input:checked + span i { -moz-transform: scale(1) rotate(-45deg); -ms-transform: scale(1) rotate(-45deg); -webkit-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); }
.checkbox-theme:hover input + span,
.checkbox-theme:active input + span { border-color: #666; background: #f5f5f5; }
.checkbox-theme:hover input:checked + span,
.checkbox-theme:active input:checked + span { border-color: #333; }
@media (max-width:639px) {
  .checkbox-theme { line-height: 40px; }
}
.checkbox-theme--round { padding: 0; margin: 0 5px; display: inline-block; vertical-align: middle; font-weight: normal; line-height: 45px; }
.checkbox-theme--round input { outline: none; display: none; }
.checkbox-theme--round input + span { display: inline-block; vertical-align: middle; border: 2px solid #666; background: #fff; width: 17px; height: 17px; padding: 0; margin: -2px 8px 0 0; border-radius: 50%; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.checkbox-theme--round.error input + span { border: 2px solid #f00; }
.checkbox-theme--round input + span i { display: inline-block; vertical-align: top; margin: 6px 0 0 5px; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -moz-transform: scale(0) rotate(-45deg); -ms-transform: scale(0) rotate(-45deg); -webkit-transform: scale(0) rotate(-45deg); transform: scale(0) rotate(-45deg); -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; }
.checkbox-theme--round input:checked + span { border-color: #666; background: #666; }
.checkbox-theme--round input:checked + span i { -moz-transform: scale(1) rotate(-45deg); -ms-transform: scale(1) rotate(-45deg); -webkit-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); }
.checkbox-theme--round:hover input + span,
.checkbox-theme--round:active input + span { border-color: #666; background: #eee; }
.checkbox-theme--round:hover input:checked + span,
.checkbox-theme--round:active input:checked + span { border-color: #666; background: #666; }
@media (max-width:639px) {
  .radio-theme { line-height: 40px; }
}

/* LABEL */
.label-style { font-size: 1rem; color: #444; padding: 0; margin: 0; display: block; position: absolute; top: 0; left: 0; line-height: 45px; width: 150px; white-space: nowrap; text-align: right; }
.check-data { font-size: 1rem; line-height: 45px; }
@media (max-width:639px) {
  .label-style { line-height: 40px; }
}
@media (max-width:499px) {
  .label-style { position: relative; line-height: 1.8; text-align: left; width: auto; margin-bottom: 5px; }
  .check-data { line-height: 40px; border: 1px solid #ddd; display: block; padding: 0 10px; background: #f5f5f5; }
}

/* TEXT INPUT */
.input-style { background: #fff; padding: 0 10px; height: 45px; width: 100%; display: block; outline: none; border-radius: 0; border: 1px solid #ddd; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-transition: border 0.15s; -o-transition: border 0.15s; -webkit-transition: border 0.15s; transition: border 0.15s; font-size: 1rem }
.input-style:focus { border: 1px solid #666; }
.input-style.error { border: 1px solid #f00; }
.input-style.error+.must-txt { display: block; font-size: 0.875rem; color: #FF5722; position: absolute; left: 135px; top: 7px; }

@media (max-width:639px) {
  .input-style { height: 40px; }
}
@media (max-width:480px) {
  .input-style.error+.must-txt { left: 10px; top: 35px; }
}
.input-date { background: url(../images/icon_calendar.png) no-repeat 98% center; padding-right: 40px; -moz-background-size: auto 20px; -o-background-size: auto 20px; -webkit-background-size: auto 20px; background-size: auto 20px; }
.input-file { background: url(../images/icon_file.png) no-repeat 98% center; -moz-background-size: auto 28px; -o-background-size: auto 28px; -webkit-background-size: auto 28px; background-size: auto 28px; text-align: left; }
.input-file-hide { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* TEXTAREA */
.textarea-style { background: #fff; height: 100px; padding: 5px 10px; width: 100%; display: block; outline: none; border-radius: 0; border: 1px solid #ddd; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-transition: border 0.15s; -o-transition: border 0.15s; -webkit-transition: border 0.15s; transition: border 0.15s; }
.textarea-style:focus { border: 1px solid #666; }
@media (max-width:639px) {
  .textarea-style { height: 80px; }
}

/* SELECT */
.select-style { border-radius: 0; padding: 0 30px 0 10px; display: block; width: 100%; height: 45px; line-height: 45px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #fff url("../images/select_aw.png") right 0 no-repeat; background-size: auto 100%; outline: none; border: 1px solid #ddd; -moz-box-sizing: none; -webkit-box-sizing: none; box-sizing: none; -moz-transition: border 0.15s; -o-transition: border 0.15s; -webkit-transition: border 0.15s; transition: border 0.15s; }
.select-style:focus { border: 1px solid #666; }
.select-style::-ms-expand { display: none; }
.select-style.error { border: 1px solid #f00; }
.form-birth { font-size: 0; }
.form-birth .select-style { font-size: 1rem; display: inline-block; vertical-align: top; width: calc((100% / 3) - 6px); margin-right: 8px; }
.form-birth .select-style:last-of-type { margin-right: 0; }
@media (max-width:639px) {
  .select-style { height: 40px; line-height: 40px; background-position: 102% 0; }
}
.m-subhead { font-size: 1.875rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.12rem; margin: 0 auto 30px auto; padding: 0; text-align: center; }
.m-subhead--icon { position: relative; font-size: 1.675rem; text-align: left; line-height: 1.3; font-weight: 500; letter-spacing: 0.12rem; margin: 0 auto 30px auto; padding: 0 0 15px 40px; border-bottom: 1px solid #ddd; }
.m-subhead--icon:not(:first-of-type) { margin-top: 30px; }
.m-subhead--icon:before { content: ""; display: block; position: absolute; left: 0; top: 2px; width: 35px; height: 35px; background-image: url(../images/icon_member_func.png); background-repeat: no-repeat; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
.m-subhead--icon.m1:before { background-position: 0 0; }
.m-subhead--icon.m2:before { background-position: 0 -35px; }
.m-subhead--icon.m3:before { background-position: 0 -70px; }
.m-subhead--icon.m4:before { background-position: 0 -105px; }
.m-subhead--icon.m5:before { background-position: 0 -140px; }
.m-subhead--icon.m6:before { background-position: 0 -175px; }
.m-sec-tit { font-size: 1.125rem; color: #000; display: block; padding: 0; margin: 10px auto 20px auto; }
@media (max-width:991px) {
  .m-subhead { font-size: 1.625rem; margin: 0 auto 20px auto; }
  .m-subhead--icon { font-size: 1.625rem; margin: 0 auto 20px auto; padding-bottom: 5px; }
  .m-subhead--icon:before { top: -3px; }
}
@media (max-width:767px) {
  .m-subhead { font-size: 1.4125rem; }
  .m-subhead--icon { font-size: 1.4125rem; }
}

/* Member */
#member { margin-top: 50px; padding: 40px 0; overflow-x: hidden; }
#member .g-breadcrumb { margin: 20px auto; }
#member.m-center { background: #f1f1f1; }
#member .three-links { margin: 0 -25px; font-size: 0; }
#member .three-links .box { display: inline-block; vertical-align: top; width: calc(100% / 3); margin: 0 0 25px 0; padding: 0 25px; }
#member .three-links .box img { max-width: 100%; }
#member-wrap { font-size: 0; color: #262626; }
#member-right { font-size: 1rem; display: inline-block; vertical-align: top; width: calc(100% - 240px); padding-left: 30px; }
.member-welcome { padding: 50px 30px 50px 130px; margin: 0 auto 25px auto; width: 100%; display: table; position: relative; }
.member-welcome:before { content: ""; position: absolute; top: 50%; margin-top: -40px; left: 30px; width: 80px; height: 80px; border-radius: 50%; position: absolute; background: url(../images/icon_member_hi.png) no-repeat center center #8f8f8f; -moz-background-size: 60%; -o-background-size: 60%; -webkit-background-size: 60%; background-size: 60%; -moz-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; -moz-animation: ani_welcome_shake 4s both infinite; -webkit-animation: ani_welcome_shake 4s both infinite; animation: ani_welcome_shake 4s both infinite; }
.member-welcome:after { content: ""; width: 0; height: auto; position: absolute; border-width: 14px 8px 0 8px; border-color: #8f8f8f transparent transparent transparent; border-style: solid; top: 50%; left: 93px; margin-top: 30px; -moz-transform: rotate(-52deg); -ms-transform: rotate(-52deg); -webkit-transform: rotate(-52deg); transform: rotate(-52deg); -moz-transform-origin: left top; -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; }
.member-welcome .text { display: table-cell; vertical-align: middle; padding: 0 200px 0 0; font-size: 1.125rem; line-height: 1.8; position: relative; }
.member-welcome .text .name { font-weight: 600; display: inline-block; margin: 0 8px 0 3px; }
.member-welcome .text .mail { font-weight: normal; font-style: normal; color: #888; }
.member-welcome .text .btn-theme { position: absolute; top: 50%; margin: -22px 0 0 0; width: 160px; right: 0; }
.member-welcome.m-record { padding-top: 30px; padding-bottom: 30px; }
.member-funcs { margin-left: -25px; margin-right: -25px; margin-bottom: 20px; font-size: 0; text-transform: capitalize;}
.member-funcs .box { display: inline-block; vertical-align: top; width: calc((100% / 3) - 50px); height: 260px; padding: 20px 25px; margin: 0 25px 25px 25px; font-size: 1.125rem; }
.member-funcs .box .notice-ring { padding-right: 30px; }
.member-funcs .box .notice-ring:hover:after { background: #666; }
.member-funcs .box .notice-ring:after { content: attr(data-ring); padding: 0 5px; font-size: 0.8125rem; line-height: 22px; height: 22px; min-width: 22px; border-radius: 23px; color: #fff; background: #333; position: absolute; top: 7px; right: 3px; text-align: center; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.member-funcs .box .title { display: block; font-weight: 600; position: relative; color: #222; margin: 0 0 10px 0; padding: 0 36px 10px 0; border-bottom: 1px solid #ddd; }
.member-funcs .box .title:after { content: ""; display: inline-block; position: absolute; width: 34px; height: 34px; top: -2px; right: 0; background-image: url(../images/icon_member_func.png); background-repeat: no-repeat; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
.member-funcs .box .title.m1:after { background-position: 0 0; }
.member-funcs .box .title.m2:after { background-position: 0 -34px; }
.member-funcs .box .title.m3:after { background-position: 0 -68px; }
.member-funcs .box .title.m4:after { background-position: 0 -102px; }
.member-funcs .box .title.m5:after { background-position: 0 -136px; }
.member-funcs .box .title.m6:after { background-position: 0 -170px; }
.member-funcs .box > ul > li > a { display: block; position: relative; color: #666; line-height: 1.6; background: #fff; padding: 6px 0; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.member-funcs .box > ul > li > a:hover { color: #000; }
#member-nav { display: inline-block !important; vertical-align: top; width: 240px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: visible; }
#member-nav > ul { overflow: hidden; text-transform: capitalize;}
#member-nav > ul > li { border-top: 1px solid #f1f1f1; }
#member-nav > ul > li .title { display: block; color: #282828; padding: 7px 13px 6px 13px; font-size: 1rem; font-weight: 600; }
#member-nav > ul > li:last-child > ul { margin-bottom: 10px; }
#member-nav > ul > li > ul { overflow: hidden; }
#member-nav > ul > li > ul > li  a { display: block; position: relative; color: #666; font-size: 1rem; line-height: 1.6; background: #fff; padding: 6px 18px 6px 13px; -moz-transition: color 0.25s, background 0.25s; -o-transition: color 0.25s, background 0.25s; -webkit-transition: color 0.25s, background 0.25s; transition: color 0.25s, background 0.25s; }
#member-nav > ul > li > ul > li > a:hover { color: #333; background: #f5f5f5; }
#member-nav > ul > li > ul > li.current > a { background: #eeeeee; }
#member-nav > ul > li > ul > li.current > a:hover { background: #eeeeee; }
#member-nav > ul > li > ul > li.current > a:after { content: ""; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; display: inline-block; position: absolute; right: 13px; top: 7px; font-size: 1rem; color: inherit; }
#member-nav > ul > li > ul#faq-nav > li.current > a:after { /* content: ""; */ display: none; }
#member-nav > ul > li > ul#faq-nav > li > ul { padding: 10px; display: none; }
#member-nav > ul > li > ul#faq-nav > li > ul > li >a { font-size: 0.9375rem; color: #666; }
#member-nav > ul > li > ul#faq-nav > li.has-child> a:after { content: ""; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; display: inline-block; position: absolute; right: 13px; top: 7px; font-size: 1rem; color: inherit; }
#member-nav > ul > li > ul#faq-nav > li.has-child.aw-on> a:after { content: ''; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; display: inline-block; position: absolute; right: 13px; top: 7px; font-size: 1rem; color: inherit; }
.member-nav-subhead a { display: block; text-align: center; font-weight: 600; padding: 20px 23px 15px 20px; border-radius: 8px 8px 0 0; background: #fff; color: #262626; font-size: 1.25rem; line-height: 1.25; letter-spacing: 0.12rem; overflow: hidden; position: relative; -moz-transition: background 0.15s, color 0.15s; -o-transition: background 0.15s, color 0.15s; -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s; }
.member-nav-subhead a:after { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.member-nav-subhead a:before { content: ""; border-radius: 50%; width: 30px; height: 30px; display: inline-block; vertical-align: middle; margin: -3px 3px 0 0; background-image: url(../images/icon_member_navhead.png); background-repeat: no-repeat; background-position: 0 0; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
.member-nav-subhead a:hover { background: #262626; color: #fff; }
.member-nav-subhead a:hover:before { background-position: 0 100%; }
.member-nav-subhead a:hover:after { -moz-animation: ani_btn_hover 0.5s 0.1s linear; -webkit-animation: ani_btn_hover 0.5s 0.1s linear; animation: ani_btn_hover 0.5s 0.1s linear; }
.btn-open-mnav { display: none; font-size: 1rem; color: #eee; background: #444; line-height: 1.2; width: 100%; height: 45px; line-height: 45px; padding: 0 10px 0 50px; margin: 0 auto 20px auto; position: relative; -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1); -moz-transition: color 0.25s, background 0.25s, box-shadow 0.25s; -o-transition: color 0.25s, background 0.25s, box-shadow 0.25s; -webkit-transition: color 0.25s, background 0.25s, box-shadow 0.25s; transition: color 0.25s, background 0.25s, box-shadow 0.25s; }
.btn-open-mnav:before { content: ""; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; display: inline-block; position: absolute; left: 0; top: 0; bottom: 0; text-align: center; font-size: 1rem; color: inherit; width: 40px; padding-left: 2px; color: #999; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #555; -webkit-box-shadow: 1px 0 0 #555; box-shadow: 1px 0 0 #555; }
.btn-open-mnav:link { color: #eee; }
.btn-open-mnav:hover { color: #fff; background: #333; -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
@media (max-width:1299px) {
  #member .three-links { margin: 0 -15px; }
  #member .three-links .box { margin: 0 0 15px 0; padding: 0 15px; }
  .member-funcs { margin-left: -15px; margin-right: -15px; font-size: 0; }
  .member-funcs .box { width: calc((100% / 3) - 30px); padding: 20px 15px; margin: 0 15px 15px 15px; }
  #member-right .form-box.form-half{ width: 100% }
}
@media (max-width:1199px) {
  #member .three-links { margin: 0 -10px; }
  #member .three-links .box { padding: 0 10px; }
  .member-welcome { padding: 30px 15px 30px 90px; margin: 0 auto 15px auto; display: block; }
  .member-welcome:before { margin-top: -27px; left: 20px; width: 55px; height: 55px; }
  .member-welcome:after { border-width: 12px 6px 0 6px; left: 63px; margin-top: 20px; }
  .member-welcome .text { display: block; padding: 0 100px 0 0; font-size: 1.125rem; }
  .member-welcome .text .btn-theme { width: 80px; height: 35px; line-height: 35px; font-size: 0.875rem; margin: -17px 0 0 0; }
  .member-welcome.m-record { padding-top: 30px; padding-bottom: 30px; }
  .member-funcs { margin-left: -10px; margin-right: -10px; }
  .member-funcs .box { width: calc((100% / 3) - 20px); margin: 0 10px 15px 10px; }
}
@media (max-width:991px) {
  #member { padding: 30px 0 0 0; }
  #member .g-breadcrumb { margin-top: 0; }
  #member .three-links { margin: 0 -5px; }
  #member .three-links .box { padding: 0 5px; }
  #member.m-center .btn-open-mnav { display: none; }
  .btn-open-mnav { display: block; }
  .member-nav-overlay { content: ""; z-index: -1; position: fixed; width: 100vw; height: 100%; background: rgba(0, 0, 0, 0.2); }
  #member-nav { display: none !important; width: auto; text-align: center; }
  .member-nav-subhead a:after { display: none; }
  .member-nav-subhead a:hover { background-color: #eee; color: #222; }
  .member-nav-subhead a:hover:before { background-position: 0 0; }
  .member-nav-subhead a:hover:after { display: none; }
  #member-right { display: block; width: 100%; padding-left: 0; }
  .member-funcs .box { width: calc(50% - 20px); padding: 20px 15px; margin: 0 10px 15px 10px; font-size: 1rem; }
}
@media (max-width:767px) {
  .member-welcome { padding: 25px 20px 25px 80px; }
  .member-welcome:before { margin-top: 0; top: 22px; left: 20px; width: 50px; height: 50px; }
  .member-welcome:after { margin-top: 0; top: 68px; left: 58px; border-width: 8px 4px 0 4px; -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); transform: rotate(-40deg); }
  .member-welcome .text { padding: 0 0 25px 0; font-size: 1rem; }
  .member-welcome .text .btn-theme { right: auto; top: auto; bottom: 0; left: 0; background: none; border: none; border-bottom: 1px solid #ddd; color: #666; width: auto; padding: 0; margin: 0; height: auto !important; line-height: 1.8 !important; }
  .member-welcome .text .btn-theme:hover { background: none; border-bottom: 1px solid #999; color: #333; }
  .member-welcome.m-record { padding-top: 25px; padding-bottom: 10px; margin-bottom: 0; }
}
@media (max-width:639px) {
  #member .three-links { margin: 0 auto; }
  #member .three-links .box { width: 100%; padding: 0; display: block; }
  #member .three-links .box img { width: 100%; }
  .member-funcs { margin-left: auto; margin-right: auto; }
  .member-funcs .box { width: 100%; padding: 15px; margin: 0 auto 15px auto; height: auto; }
  .member-funcs .box .title { margin: 0 0 5px 0; padding: 0 36px 5px 0; }
}
@media (max-width:399px) {
  .member-nav-subhead a { padding-right: 40px; padding-left: 40px; }
}

/* Member FAQ */
.faq-search-wrap { background: #f0f0f0; border: 1px solid #ddd; padding: 30px 60px; margin: 0 auto 20px auto; }
.faq-search-wrap form { position: relative; font-size: 0; padding: 0 120px 0 130px; }
.faq-search-wrap form .btn-theme { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #696969; background-color: #696969; color: #fff; overflow: hidden; width: 110px; font-size: 0.9375rem; position: absolute; bottom: 0; right: 0; }
.faq-search-wrap form .btn-theme:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.faq-search-wrap form .btn-theme:link { color: #fff; }
.faq-search-wrap form .btn-theme:link:hover { color: #fff; }
.faq-search-wrap form .btn-theme:hover { color: #fff; background: #333; border-color: #333; }
.faq-search-wrap form .btn-theme:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.faq-search-wrap form .btn-theme > span { display: inline-block; z-index: 1; }
.faq-search-wrap form .btn-theme > span:before { content: ""; width: 20px; height: 20px; background: url(../images/icon_search_white.png) no-repeat 0 0; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; display: inline-block; vertical-align: middle; margin-right: 5px; margin-top: -2px; }
.faq-search-wrap form .label-style { font-size: 1.125rem; position: absolute; top: 0; left: 0; width: 120px; text-align: right; font-weight: 600; }
.faq-search-wrap form .select-style { font-size: 1rem; width: 200px; display: inline-block; vertical-align: top; margin-right: 10px; }
.faq-search-wrap form .input-style { font-size: 1rem; width: calc(100% - 210px); display: inline-block; vertical-align: top; }
input::-webkit-input-placeholder { color: #999; }
input:-moz-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
.faq-search-wrap input::-webkit-input-placeholder { color: #bbb; }
.faq-search-wrap input:-moz-placeholder { color: #bbb; }
.faq-search-wrap input::-moz-placeholder { color: #bbb; }
.faq-search-wrap input:-ms-input-placeholder { color: #bbb; }
.faq-subtitle { padding: 15px 0; margin: 0 auto; font-size: 1.125rem; font-weight: 600; border-bottom: 2px solid #282828; }
.faq-list { display: block; margin-bottom: 25px; line-height: 1.6; -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; }
.faq-list.scroll-view .box { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.faq-list .box { display: block; padding: 0; margin: 0 auto; background: #fff; border-bottom: 1px solid #ddd; opacity: 0; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -moz-transition: opacity 0.5s, -moz-transform 0.5s; -o-transition: opacity 0.5s, -o-transform 0.5s; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; }
.faq-list .box:nth-child(1) { -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.faq-list .box:nth-child(2) { -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.faq-list .box:nth-child(3) { -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.faq-list .box:nth-child(4) { -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.faq-list .box:nth-child(5) { -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.faq-list .box:nth-child(6) { -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.faq-list .box:nth-child(7) { -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }
.faq-list .box:nth-child(8) { -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.faq-list .box:nth-child(9) { -moz-transition-delay: 0.9s; -o-transition-delay: 0.9s; -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }
.faq-list .box:nth-child(10) { -moz-transition-delay: 1s; -o-transition-delay: 1s; -webkit-transition-delay: 1s; transition-delay: 1s; }
.faq-list .box .q { display: block; position: relative; color: #222; margin: 0; font-size: 1rem; padding: 15px 15px 15px 80px; cursor: pointer; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.faq-list .box .q:before { content: "Q."; position: absolute; font-size: 1.125rem; top: 12px; left: 15px; width: 40px; height: 40px; text-align: center; display: inline-block; color: #666; border-radius: 50%; font-weight: 600; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.faq-list .box .q:hover { color: #000; }
.faq-list .box .a { position: relative; border-top: 1px solid #ddd; display: none; padding: 15px 15px 15px 80px; margin: 0; background: #f6f6f6; font-size: 1rem; color: #666; }
.faq-list .box .a:before { content: "A."; position: absolute; font-size: 1.25rem; top: 13px; left: 15px; width: 40px; text-align: center; display: inline-block; color: #45968f; font-weight: 600; }
.faq-list .box.open .a { display: block; background: #f6f6f6; }
.faq-list .box:hover { background: #fdfdfd; }
@media (max-width:1199px) {
  .faq-search-wrap { padding: 20px 30px; }
}
@media (max-width:991px) {
  .faq-search-wrap { padding: 20px; margin: 0 auto 15px auto; }
  .faq-search-wrap form { padding: 0 90px 0 110px; }
  .faq-search-wrap form .label-style { width: 100px; font-size: 1rem; }
  .faq-search-wrap form .btn-theme { width: 80px; padding: 0; }
  .faq-search-wrap form .btn-theme span:before { margin-right: 2px; }
  .faq-list .box .q { padding: 10px 10px 10px 40px; }
  .faq-list .box .q:before { top: 6px; left: 0; }
  .faq-list .box .a { padding: 10px 10px 10px 40px; }
  .faq-list .box .a:before { top: 6px; left: 0; }
}
@media (max-width:639px) {
  .faq-search-wrap form { padding: 0 90px 0 0; }
  .faq-search-wrap form .input-style { width: calc(50% - 5px); }
  .faq-search-wrap form .select-style { width: calc(50% - 5px); }
  .faq-search-wrap form .label-style { width: auto; position: relative; text-align: left; top: auto; left: auto; line-height: 1.8; margin: 0 0 5px 0; }
}
@media (max-width:499px) {
  .faq-search-wrap { padding: 15px; }
  .faq-search-wrap form { padding-right: 55px; }
  .faq-search-wrap form .input-style { display: block; width: 100%; }
  .faq-search-wrap form .select-style { display: block; width: 100%; margin-bottom: 5px; }
  .faq-search-wrap form .btn-theme { width: 50px; height: 95px; padding: 0; }
  .faq-search-wrap form .btn-theme span { font-size: 0; }
}

/* Before login */
#member.m-beforelogin { padding: 90px 0; background: url(../images/login_bg.jpg) no-repeat 0 0 #e5e5e5; background-size: cover; }
#member.m-beforelogin .title { text-align: center }
.m-beforelogin .wrap-1500 { font-size: 0; direction: rtl; display: table; width: 100%; }
.m-beforelogin .wrap-1500 .left { display: table-cell; vertical-align: middle; font-size: 1rem; width: calc(100% - 420px); direction: ltr; background-repeat: no-repeat; background-position: center center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; opacity: 0; -moz-transform: translate(20px, 0); -ms-transform: translate(20px, 0); -webkit-transform: translate(20px, 0); transform: translate(20px, 0); -moz-transition: opacity 0.6s, -moz-transform 0.6s; -o-transition: opacity 0.6s, -o-transform 0.6s; -webkit-transition: opacity 0.6s, -webkit-transform 0.6s; transition: opacity 0.6s, transform 0.6s; }
.m-beforelogin .wrap-1500 .left.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.m-beforelogin .wrap-1500 .left .login_linkimg { position: relative; display: inline-block; vertical-align: bottom; width: 100%; background-repeat: no-repeat; background-position: center center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; }
.m-beforelogin .wrap-1500 .left .login_linkimg:before { content: ""; position: relative; display: block; padding-bottom: 67.5%; }
.m-beforelogin .wrap-1500 .left .login_linkimg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.m-beforelogin .wrap-1500 .left img { max-width: 100%; -moz-transition: opacity 0.15s; -o-transition: opacity 0.15s; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; }
.m-beforelogin .wrap-1500 .right { display: table-cell; vertical-align: top; font-size: 1rem; width: 420px; background: #fff; padding: 40px; direction: ltr; opacity: 0; -moz-transform: translate(-20px, 0); -ms-transform: translate(-20px, 0); -webkit-transform: translate(-20px, 0); transform: translate(-20px, 0); -moz-transition: opacity 0.6s, -moz-transform 0.6s; -o-transition: opacity 0.6s, -o-transform 0.6s; -webkit-transition: opacity 0.6s, -webkit-transform 0.6s; transition: opacity 0.6s, transform 0.6s; }
.m-beforelogin .wrap-1500 .right.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.m-beforelogin .wrap-1500 .right .m-subhead { font-size: 1.25rem; font-weight: 600; margin: 0 auto 10px }
.m-beforelogin .wrap-1500 .right .m-subhead:before { content: ""; display: block; margin: 0 auto 6px auto; width: 155px; height: 30px; background: url(../images/155x30_USCA.png) no-repeat center center; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; }
.m-beforelogin .wrap-1500 .right .txt{ font-size: 0.9375rem; line-height: 1.6; margin-bottom: 10px;}
.m-beforelogin .wrap-1500 .right .txt span{ color: #f44336 }
.m-beforelogin .wrap-1500 .right .txt a{ text-decoration: underline }
.m-beforelogin .wrap-1500 .btn-wrap { text-align: center; }
.m-beforelogin .wrap-1500 .btn-wrap p { line-height: 1.8; font-size: 0.9375rem; margin: 15px 0; }
.m-beforelogin .wrap-1500 .btn-wrap .btn-normal-login.color-dark { color: #222; margin-left: 3px; }
.m-beforelogin .wrap-1500 .btn-wrap .text-left { text-align: left; line-height: 1.2 }
.m-beforelogin .wrap-1500 .btn-wrap .text-right { text-align: right; line-height: 1.2}
.m-beforelogin .wrap-1500 .btn-wrap .btn-forget { display: inline-block; border-bottom: 1px solid #444; color: #222; font-size: 0.9375rem; line-height: 1.8; width: auto; padding: 0; margin: 15px 0 0 0; height: auto; }
.m-beforelogin .wrap-1500 .btn-wrap .btn-forget:hover { border-bottom: 1px solid #45968f; color: #45968f; }
.m-beforelogin .wrap-1500 .btn-wrap .btn-normal-login { display: inline-block; color: #666; font-size: 0.9375rem; line-height: 1.8; width: auto; margin: 5px 0 0 0; height: auto; position: relative; padding: 0; -moz-transition: padding 0.25s; -o-transition: padding 0.25s; -webkit-transition: padding 0.25s; transition: padding 0.25s; }
.m-beforelogin .wrap-1500 .btn-wrap .btn-normal-login:after { content: ""; position: absolute; display: inline-block; top: 8px; right: 0; width: 15px; height: 5px; border-right: 1px solid #222; border-bottom: 1px solid #222; -moz-transform: skew(40deg) scale(0); -ms-transform: skew(40deg) scale(0); -webkit-transform: skew(40deg) scale(0); transform: skew(40deg) scale(0); -moz-transition: -moz-transform 0.25s; -o-transition: -o-transform 0.25s; -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; }
.m-beforelogin .wrap-1500 .btn-wrap .btn-normal-login:hover { color: #222; padding-right: 18px; }
.m-beforelogin .wrap-1500 .btn-wrap .btn-normal-login:hover:after { -moz-transform: skew(40deg) scale(1); -ms-transform: skew(40deg) scale(1); -webkit-transform: skew(40deg) scale(1); transform: skew(40deg) scale(1); }
.m-beforelogin .wrap-1500 .login-social { text-align: center; margin: 0px 0 0 0; }
.m-beforelogin .wrap-1500 .login-social .tit { position: relative; color: #222; }
.m-beforelogin .wrap-1500 .login-social .tit:before { content: ""; height: 1px; width: 100%; z-index: 0; position: absolute; top: 50%; left: 0; background: #666; display: block; }
.m-beforelogin .wrap-1500 .login-social .tit div { position: relative; z-index: 1; padding: 0 15px; display: inline-block; background-color: #fff; width: auto; font-size: 0.9375rem; }
.m-beforelogin .wrap-1500 .login-social .link { display: inline-block; width: 36px; height: 36px; border-radius: 50%; background: #222; text-align: center; font-size: 0; margin: 0 5px; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.m-beforelogin .wrap-1500 .login-social .link:before { content: ""; width: 36px; height: 36px; line-height: 36px; display: inline-block; vertical-align: top; }
.m-beforelogin .wrap-1500 .login-social .link.line:before { background-image: url(../images/icon_line.png); background-repeat: no-repeat; background-position: 0 0; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
.m-beforelogin .wrap-1500 .login-social .link.line:hover { background: #00c300; }
.m-beforelogin .wrap-1500 .login-social .link.line:hover:before { background-position: 0 100%; }
.m-beforelogin .wrap-1500 .login-social .link.fb:before { content: ""; font-size: 1.125rem; font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: 900; display: inline-block; color: #d5d5d5; }
.m-beforelogin .wrap-1500 .login-social .link.fb:hover { background: #3b5998; }
.m-beforelogin .wrap-1500 .login-social .link.fb:hover:before { color: #fff; }
.m-beforelogin .wrap-1500 .login-social .link.google:before { content: ""; font-size: 1.125rem; font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: 900; display: inline-block; color: #d5d5d5; }
.m-beforelogin .wrap-1500 .login-social .link.google:hover { background: #4285f4; }
.m-beforelogin .wrap-1500 .login-social .link.google:hover:before { color: #fff; }
.form-box-notext { margin: 0 0 10px 0; position: relative; }
.form-box-notext .input-style,
.form-box-notext .form-gp--pwd { z-index: 0; }
.form-box-notext .label-style { z-index: 2; font-size: 0; width: auto; text-align: left; }
.form-box-notext .label-style:before { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; display: inline-block; position: absolute; top: 0; left: 0; width: 40px; text-align: center; line-height: 45px; font-size: 1rem !important; color: #222; }
.form-box-notext.id .input-style { padding-left: 40px; }
.form-box-notext.id .label-style:before { content: ""; }
.form-box-notext.password .input-style { padding-left: 40px; }
.form-box-notext.password .label-style:before { content: ""; }
.openBox { position: relative; padding: 40px; background: #fff; max-width: 1000px; margin: 0 auto; border-radius: 3px }
.openBox .inner { max-height: 60vh; overflow-y: auto; overflow-x: hidden; margin-bottom: 30px; }
.openBox .title { text-align: center; font-size: 1.56rem; font-weight: bold; border-radius: 20px; }
#register-check { width: 500px; margin: 0 auto; }
#register-check .title { line-height: 1.5 }
#register-check .content { width: 350px; margin: 5% auto }
@media (max-width: 1480px) {
  .m-beforelogin .wrap-1500 .left .login_linkimg:before { padding-bottom: 80%; }
}
@media (max-width: 1366px) {
  .m-beforelogin .wrap-1500 .left .login_linkimg:before { padding-bottom: 85%; }
}
@media (max-width:1199px) {
  .m-beforelogin .wrap-1500 .left .login_linkimg:before { padding-bottom: 110%; }
}
@media (max-width:1023px) {
  #member.m-beforelogin { padding: 20px 0; }
  .m-beforelogin .wrap-1500 .left { display: block; width: 100%; padding-right: 0; -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); -webkit-transform: translate(0, -20px); transform: translate(0, -20px); }
  .m-beforelogin .wrap-1500 .right { display: block; width: 100%; padding: 40px; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); }
  .m-beforelogin .wrap-1500 .right .m-subhead:before { display: none; }
  .m-beforelogin .wrap-1500 .left .login_linkimg:before { padding-bottom: 50%; }
}
@media (max-width:499px) {
  .openBox { padding: 20px 20px 20px 20px; height: 100%; }
  .openBox .inner { max-height: 80vh; overflow-y: scroll; overflow-x: hidden; }
  .m-beforelogin .wrap-1500 .right { padding: 30px 20px; }
  .form-box-notext { margin: 0 0 10px 0; position: relative; }
  .form-box-notext .label-style { position: absolute; width: 40px; }
  #register-check { width: 100%; }
  #register-check .title { font-size: 1.25rem; font-weight: 600; }
  #register-check .content { width: calc(100% - 30px); margin: 30px auto }
}

/* inquiry history */
.contact-form { margin: 0 auto 50px auto; }
.contact-form .red{color: red; font-size: 0.9375rem;}

.iq-record-filter { margin: 0 auto 25px auto; padding-right: 250px; position: relative; }
.iq-record-filter .type { width: auto; }
.iq-record-filter .type .label-style { font-size: 1.125rem; font-weight: 600; }
.iq-record-filter .type .select-style { width: auto; min-width: 200px; }
.iq-record-filter .state { position: absolute; width: 250px; top: 8px; right: 0; text-align: right; }
.iq-record-filter .state .btn-theme { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #ddd; background-color: #ddd; color: #666; overflow: hidden; line-height: 30px; height: 30px; display: inline-block; vertical-align: middle; width: calc(50% - 5px); padding: 0; }
.iq-record-filter .state .btn-theme:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.iq-record-filter .state .btn-theme:link { color: #666; }
.iq-record-filter .state .btn-theme:link:hover { color: #fff; }
.iq-record-filter .state .btn-theme:hover { color: #fff; background: #999; border-color: #999; }
.iq-record-filter .state .btn-theme:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.iq-record-filter .state .btn-theme.current { background: #222; border-color: #222; color: #fff; }
.iq-record-filter .state .btn-theme.reply-no { margin-left: 6px; }
.iq-record-list .box { font-size: 1rem; padding: 0; margin: 0 auto 10px auto; opacity: 0; display: none; }
.iq-record-list .box.scroll-view { opacity: 1; display: block; -moz-animation: ani_fadeInUp 0.5s both; -webkit-animation: ani_fadeInUp 0.5s both; animation: ani_fadeInUp 0.5s both; }
.iq-record-list .box .ask { display: block; background: #f5f5f5; padding: 20px 25px; color: #282828; font-weight: normal; position: relative; }
.iq-record-list .box .ask:before { content: attr(data-tit); display: block; color: #999; margin-bottom: 5px; }
.iq-record-list .box .ask .date { position: absolute; top: 20px; right: 20px; color: #aaa; font-size: 0.9375em; display: inline-block; }
.iq-record-list .box .reply { display: block; position: relative; background: #fff; padding: 20px 50px; color: #282828; }
.iq-record-list .box .reply:before { content: attr(data-tit); display: block; color: #999; margin-bottom: 5px; }
.iq-record-list .box .reply .date { position: absolute; top: 20px; right: 20px; color: #aaa; font-size: 0.9375em; display: inline-block; }
.btn-more-record { display: block; margin: 20px auto; width: 120px; height: 35px; line-height: 35px; text-align: center; color: #45968f; background: #fff; margin-top: -2px; font-size: 0.9375rem; border: none; }
.btn-more-record:hover { color: #3d857e; }
.btn-more-record span:before { content: ""; display: inline-block; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; margin-right: 5px; }
.iq-ask-form { background: #f5f5f5; padding: 20px 25px; }
.iq-ask-form form { position: relative; font-size: 1rem; }
.iq-ask-form .form-box { padding-left: 0; }
.iq-ask-form .label-style { position: relative; display: block; line-height: 1.8; margin: 0; width: auto; text-align: left; }
.iq-ask-form .ask-box { position: relative; }
.iq-ask-form .textarea-style { padding-right: 130px; line-height: 1.5; border: 1px solid #ddd; background: #fff; }
.iq-ask-form .btn-theme { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #555; background-color: #555; color: #fff; overflow: hidden; position: absolute; top: 50%; right: 20px; width: 100px; height: 38px; line-height: 38px; margin: 0; margin-top: -19px; font-size: 1rem; border-radius: 3px; }
.iq-ask-form .btn-theme:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.iq-ask-form .btn-theme:link { color: #fff; }
.iq-ask-form .btn-theme:link:hover { color: #fff; }
.iq-ask-form .btn-theme:hover { color: #fff; background: #333; border-color: #333; }
.iq-ask-form .btn-theme:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
@media (max-width:639px) {
  .iq-record-filter { padding-right: 0; margin-bottom: 30px; }
  .iq-record-filter .type { width: 100%; padding-left: 90px; }
  .iq-record-filter .type .label-style { width: 75px; line-height: 40px; font-size: 1rem; position: absolute; top: 0; left: 0; }
  .iq-record-filter .type .select-style { width: 100%; min-width: auto; height: 40px; line-height: 40px; margin-bottom: 10px; }
  .iq-record-filter .state { position: relative; width: 100%; top: auto; }
  .iq-record-filter .state .btn-theme { line-height: 40px; height: 40px; }
  .iq-record-list .box .ask { padding: 10px; }
  .iq-record-list .box .ask .date { top: 10px; right: 10px; font-size: 0.75em; }
  .iq-record-list .box .reply { padding: 10px; }
  .iq-record-list .box .reply .date { top: 10px; right: 10px; font-size: 0.75em; }
  .iq-ask-form { padding: 15px 10px 10px 10px; }
  .iq-ask-form .textarea-style { padding-right: 110px; }
  .iq-ask-form .btn-theme { right: 25px; width: 80px; }
}
@media (max-width:499px) {
  .iq-ask-form .label-style { margin-bottom: 5px; }
  .iq-ask-form .textarea-style { padding-right: 15px; }
  .iq-ask-form .btn-theme { position: relative; display: block; margin: 10px auto 0 auto; right: auto; width: 100%; }
}
.invc-notice,
.receiver-notice { font-size: 1.125rem; margin: 50px auto 20px auto; }
@media (max-width:767px) {
  .invc-notice,
  .receiver-notice { font-size: 1rem; text-align: center; }
}

/* return */
.return-bottom { margin: 0 auto 20px auto; font-size: 0; text-align: center; background: #f0f0f0; border: 1px solid #ddd; padding: 30px 60px; }
.return-bottom.apply { background: none; border: none; border-top: 1px solid #ddd; padding: 50px 0 0 0; }
.return-bottom .left { width: 40%; display: inline-block; vertical-align: middle; font-size: 1rem; position: relative; text-align: left; }
.return-bottom .form-box { padding-left: 135px; margin: 0; }
.return-bottom .label-style { font-size: 1.125rem; position: absolute; top: 0; left: 0; width: 120px; text-align: left; font-weight: 600; }
.return-bottom .select-style { font-size: 1rem; max-width: 250px; width: 100%; display: inline-block; vertical-align: top; margin-right: 10px; }
.return-bottom .return-btn-wrap { width: 60%; display: inline-block; vertical-align: middle; font-size: 0; position: relative; text-align: right; }
.return-bottom.apply .return-btn-wrap { width: 100%; }
.return-bottom .return-btn-wrap .agree { display: inline-block; vertical-align: middle; font-size: 1rem; position: relative; }
.return-bottom .return-btn-wrap .btn-theme { width: auto; max-width: inherit; font-size: 1rem; }
.return-bottom .return-btn-wrap .btn-theme.reset { margin-right: 5px; }
.return-bottom .return-btn-wrap .msg-mustagree { font-size: 1rem; line-height: 1.5; display: inline-block; position: absolute; white-space: nowrap; top: 0; left: 0; padding: 8px 15px; background: #fff; color: #D83500; border: 2px solid #D83500; -moz-transform: translate(0, -120%); -ms-transform: translate(0, -120%); -webkit-transform: translate(0, -120%); transform: translate(0, -120%); -moz-animation: ani_jump 0.5s; -webkit-animation: ani_jump 0.5s; animation: ani_jump 0.5s; }
.return-bottom .return-btn-wrap .msg-mustagree:before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 8px 0 8px; border-color: #D83500 transparent transparent transparent; position: absolute; bottom: -10px; left: 50px; margin-left: -8px; }
.return-bottom .return-btn-wrap .msg-mustagree:after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: #fff transparent transparent transparent; position: absolute; bottom: -7px; left: 50px; margin-left: -6px; }
@media (max-width:1366px) {
  .return-bottom .left,
  .return-bottom .return-btn-wrap { width: 100%; display: block; text-align: left }
  .return-bottom .left { margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
}
@media (max-width:1199px) {
  .return-bottom { padding: 20px; }
  .return-bottom.apply { padding: 10px 0; }
  .return-bottom .left .select-style { max-width: none; width: 100%; }
  .return-bottom.apply .left,
  .return-bottom.apply .return-btn-wrap { width: auto; max-width: 500px; display: block; margin: 10px auto; text-align: center; }
}
@media (max-width:991px) {
  .return-bottom { margin: 0 auto 15px auto; }
}
@media (max-width:639px) {
  .return-bottom .return-btn-wrap .agree { position: relative; top: auto; left: auto; width: 100%; margin-left: auto; margin-right: auto; text-align: center; line-height: 30px; display: block; background: #ddd; border-radius: 5px; padding: 5px; margin: 0 auto 10px auto; }
  .return-bottom .return-btn-wrap .btn-theme { width: calc(50% - 10px); font-size: 1rem; }
  .return-bottom .return-btn-wrap .msg-mustagree { left: 50%; -moz-transform: translate(-50%, -120%); -ms-transform: translate(-50%, -120%); -webkit-transform: translate(-50%, -120%); transform: translate(-50%, -120%); }
  .return-bottom .return-btn-wrap .msg-mustagree:before,
  .return-bottom .return-btn-wrap .msg-mustagree:after { left: 50%; }
}
@media (max-width:499px) {
  .return-bottom { padding: 15px; }
  .return-bottom.apply { padding: 15px 0; }
}

/* repair */
.repair-btn-bottom { position: relative; text-align: center; line-height: 45px; padding: 30px 0 50px 0; margin-top: 30px; border-top: 1px solid #ddd; }
.repair-btn-bottom.finish { border-top: none; }
.repair-btn-bottom a { vertical-align: middle; }
.repair-btn-bottom .agree { position: absolute; top: 30px; left: 50%; margin-left: -330px; }
.repair-btn-bottom .msg-mustagree { font-size: 1rem; line-height: 1.5; display: inline-block; position: absolute; white-space: nowrap; top: 0; left: 50%; padding: 8px 15px; background: #fff; color: #D83500; border: 2px solid #D83500; -moz-transform: translate(-170%, -70%); -ms-transform: translate(-170%, -70%); -webkit-transform: translate(-170%, -70%); transform: translate(-170%, -70%); -moz-animation: ani_jump 0.5s; -webkit-animation: ani_jump 0.5s; animation: ani_jump 0.5s; }
.repair-btn-bottom .msg-mustagree:before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 8px 0 8px; border-color: #D83500 transparent transparent transparent; position: absolute; bottom: -10px; left: 50%; margin-left: -8px; }
.repair-btn-bottom .msg-mustagree:after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: #fff transparent transparent transparent; position: absolute; bottom: -7px; left: 50%; margin-left: -6px; }
@media (max-width:991px) {
  .repair-btn-bottom { padding: 20px 0 40px 0; }
  .repair-btn-bottom .agree { position: relative; top: auto; left: auto; margin-left: auto; margin-right: auto; text-align: center; line-height: 30px; display: block; background: #f5f5f5; border-radius: 5px; padding: 5px; margin: 0 auto 10px auto; }
  .repair-btn-bottom .msg-mustagree { left: 50%; -moz-transform: translate(-50%, -80%); -ms-transform: translate(-50%, -80%); -webkit-transform: translate(-50%, -80%); transform: translate(-50%, -80%); }
}
.repair-check { list-style-type: none; margin: 20px 0; padding: 20px 0 0 0; border-top: 1px solid #ddd; }
.repair-check.no-line { padding: 0; border-top: none; }
.repair-check li { display: block; padding: 0 0 0 115px; margin: 0 0 10px 0; position: relative; }
.repair-check li .title { position: absolute; top: 0; left: 0; width: 110px; }
.repair-check li .title:after { content: "："; }
@media (max-width:499px) {
  .repair-check li { padding: 0; margin-bottom: 15px; text-align: center; }
  .repair-check li .title { position: relative; top: auto; left: auto; width: 100%; display: block; font-weight: 600; background: #f5f5f5; border: 1px solid #eee; padding: 3px 10px; margin: 0 auto 5px auto; border-radius: 5px; }
  .repair-check li .title:after { display: none; }
}
.repair-finish-num { background: #f0f0f0; border: 1px solid #ddd; text-align: center; padding: 30px 15px; font-size: 1.125rem; font-weight: 600; }

/* coupon icon */
.coupon-icon { display: block; position: relative; text-align: center; border-radius: 8px; line-height: 1.3; padding: 5px 10px; color: #fff; background-color: #444444; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF444444', endColorstr='#FF222222'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #444444), color-stop(100%, #222222)); background-image: -moz-linear-gradient(left top, #444444 0%, #222222 100%); background-image: -webkit-linear-gradient(left top, #444444 0%, #222222 100%); background-image: linear-gradient(to right bottom, #444444 0%, #222222 100%); }
.coupon-icon:before,
.coupon-icon:after { content: ""; width: 6px; height: 12px; position: absolute; z-index: 2; top: 50%; margin-top: -6px; border: 1px solid rgba(255, 255, 255, 0.4); }
.coupon-icon:before { left: 10px; border-radius: 0 12px 12px 0; border-left: 1px solid #333; }
.coupon-icon:after { right: 10px; border-radius: 12px 0 0 12px; border-right: 1px solid #333; }
.coupon-icon .inner { display: block; position: relative; border-radius: 6px; padding: 10px 5px; background: none; border: 1px solid rgba(255, 255, 255, 0.4); }
.coupon-icon .inner:before,
.coupon-icon .inner:after { content: ""; width: 6px; height: 12px; position: absolute; z-index: 2; top: 50%; margin-top: -6px; background: #fff; }
.coupon-icon .inner:before { left: -11px; border-radius: 0 12px 12px 0; }
.coupon-icon .inner:after { right: -11px; border-radius: 12px 0 0 12px; }
.coupon-icon .grad { position: absolute; z-index: 2; top: -5px; bottom: -5px; left: -1px; right: -1px; opacity: 0.9; background: -moz-linear-gradient(45deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 20%, #505050 51%, rgba(80, 80, 80, 0) 80%, rgba(80, 80, 80, 0) 100%); background: -webkit-linear-gradient(45deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 20%, #505050 51%, rgba(80, 80, 80, 0) 80%, rgba(80, 80, 80, 0) 100%); background: linear-gradient(45deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 20%, #505050 51%, rgba(80, 80, 80, 0) 80%, rgba(80, 80, 80, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00555555', endColorstr='#00555555', GradientType=1); }
.coupon-icon em { display: block; position: relative; z-index: 5; font-style: normal; font-size: 1.875rem; font-weight: 600; line-height: 1; }
.coupon-icon em small{ font-size: 0.875rem; }
.coupon-icon .desc { position: relative; z-index: 5; margin-top: 3px; font-size: 0.875rem; display: block; color: #eeeeee; }
.coupon-icon.is-used { background-color: #EFEFEF; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFEFEFEF', endColorstr='#FFEAEAEA'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #efefef), color-stop(100%, #eaeaea)); background-image: -moz-linear-gradient(left top, #efefef 0%, #eaeaea 100%); background-image: -webkit-linear-gradient(left top, #efefef 0%, #eaeaea 100%); background-image: linear-gradient(to right bottom, #efefef 0%, #eaeaea 100%); color: #555; }
.coupon-icon.is-used:before,
.coupon-icon.is-used:after { border: 1px solid #fff; }
.coupon-icon.is-used:before { border-left: 1px solid #efefef; }
.coupon-icon.is-used:after { border-right: 1px solid #efefef; }
.coupon-icon.is-used .inner { border: 1px solid #fff; }
.coupon-icon.is-used .desc { color: #888; }
.coupon-icon.is-used .grad { left: 20px; right: 20px; background: -moz-linear-gradient(45deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 0) 20%, #efefef 51%, rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0) 100%); background: -webkit-linear-gradient(45deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 0) 20%, #efefef 51%, rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0) 100%); background: linear-gradient(45deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 0) 20%, #efefef 51%, rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00EFEFEF', endColorstr='#00EFEFEF', GradientType=1); }

/* record */
.record-list { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; display: block \9; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; align-content: flex-start; font-size: 0; margin: 0 auto 40px auto !important; height: 180px; width: 100%; }
.record-list li { font-size: 1rem; background: #f6f6f6; color: #666; line-height: 1.875; position: relative; display: inline-block; width: 50%; padding: 10px 60px; border-bottom: 1px solid #fff; }
.record-list li:before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; left: 0; background-color: #fff; }
.record-list li .stitle { color: #282828; font-weight: 600; display: inline-block; }
.record-slide-wrap { margin: 0 auto 40px auto; }
.record-slide-wrap .subhead { background: #222; color: #fff; font-size: 1rem; border-radius: 10px 10px 0 0; padding: 10px 20px; margin: 0; }
.record-slide-wrap .content { border: 1px solid #ddd; padding: 25px 0; background: #fff; }
.record-slide-wrap .record-slide { padding: 0 25px; }
.record-slide-wrap .record-slide .box { padding: 1px 12px; max-width: 280px; margin: 0 auto; overflow: hidden; }
.record-slide-wrap .record-slide .box a { display: block; text-align: center; padding: 10px 20px; margin: 0; border: 1px solid transparent; -moz-transition: border 0.25s; -o-transition: border 0.25s; -webkit-transition: border 0.25s; transition: border 0.25s; }
.record-slide-wrap .record-slide .box a:hover { border-color: #ddd; }
.record-slide-wrap .record-slide .box a:hover .name { color: #000; }
.record-slide-wrap .record-slide .box .img { display: block; line-height: 0; width: 100%; padding-bottom: 100%; position: relative; overflow: hidden; }
.record-slide-wrap .record-slide .box .img img { max-width: 100%; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.record-slide-wrap .record-slide .box .name { display: block; margin: 15px auto 0 auto; font-size: 1rem; line-height: 1.6; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #222; }
.record-slide-wrap .record-slide .box .price { display: block; margin: 5px auto 0 auto; font-size: 1rem; color: #222; }
.record-slide-wrap .record-slide .slick-arrow { top: 50%; height: 50px; width: 25px; margin-top: -25px; border: none; font-size: 0; background: #a7a7a7; z-index: 10; position: absolute; -moz-transition: backgorund 0.25s; -o-transition: backgorund 0.25s; -webkit-transition: backgorund 0.25s; transition: backgorund 0.25s; }
.record-slide-wrap .record-slide .slick-arrow:before { content: ""; width: 10px; height: 10px; border: none; position: absolute; top: 50%; margin-top: -5px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.record-slide-wrap .record-slide .slick-arrow:hover { background: #333; border: none; }
.record-slide-wrap .record-slide .slick-arrow.slick-prev { left: 0; border-radius: 0 5px 5px 0; }
.record-slide-wrap .record-slide .slick-arrow.slick-prev:before { left: 50%; margin-left: -5px; border-top: 2px solid #eee; border-left: 2px solid #eee; }
.record-slide-wrap .record-slide .slick-arrow.slick-prev:hover:before { border-top: 2px solid #fff; border-left: 2px solid #fff; }
.record-slide-wrap .record-slide .slick-arrow.slick-next { right: 0; left: auto; border-radius: 5px 0 0 5px; }
.record-slide-wrap .record-slide .slick-arrow.slick-next:before { right: 50%; margin-right: -5px; border-bottom: 2px solid #eee; border-right: 2px solid #eee; }
.record-slide-wrap .record-slide .slick-arrow.slick-next:hover:before { border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
@media (max-width:991px) {
  .record-list li { padding: 10px 15px; }
}
@media (max-width:639px) {
  .record-list { height: auto; display: block; margin-bottom: 25px !important; }
  .record-list li { padding: 5px 10px; width: 100%; display: block; font-size: 1rem; }
  .record-list li:before { display: none; }
  .record-slide-wrap { margin: 0 auto 25px auto; }
  .record-slide-wrap .subhead { padding: 10px 15px; }
  .record-slide-wrap .content { padding: 15px 0; }
  .record-slide-wrap .record-slide { padding: 0 10px; }
  .record-slide-wrap .record-slide .box { padding: 1px 10px; }
  .record-slide-wrap .record-slide .box a { padding: 10px; }
}

/* table */
.color-red { color: #e23e3d; }
.t-default { font-size: 0; display: block; opacity: 0; margin-bottom: -1px; background: #fff; -moz-transition: opacity 0.5s, -moz-transform 0.5s; -o-transition: opacity 0.5s, -o-transform 0.5s; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; }
.t-default.scroll-view { opacity: 1; }
.t-default .t-row { width: 100%; font-size: 0; }
.t-default .t-row.nodata .col { display: block; width: 100%; text-align: center; }
.t-default .t-row.nodata .col:before { display: none !important; }
.t-default .col { text-align: center; padding: 13px 10px; -moz-transition: background 0.2s, color 0.2s; -o-transition: background 0.2s, color 0.2s; -webkit-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; }
.t-default .t-head .t-row { align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; display: block \9; background: #f6f6f6; }
.t-default .t-head .col { text-align: center; line-height: 1.5; color: #666; display: inline-block; white-space: nowrap; font-size: 1rem; }
.t-default .t-body { width: 100%; display: block; }
.t-default .t-body .t-row { border-top: none; }
.t-default .t-body .t-row:first-of-type { border-top: none; }
.t-default .t-body .t-row.open .detail { display: block; }
.t-default .t-body .t-row .detail.open { display: block; }
.t-default .t-body .col { color: #282828; border-bottom: 1px solid #e1e1e1; }
.t-default .t-body .info { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; font-size: 0; display: block \9; align-items: stretch; justify-content: space-between; }
.t-default .t-body .col { font-size: 1rem; display: inline-block; }
.t-default .t-body .detail { display: none; width: 100%; font-size: 1rem; background: #fff; padding: 20px; /* border-bottom: 1px solid #e1e1e1; */ border-top: none; }
.t-default.t-cart { margin-bottom: 0; }
.t-default.t-cart .info { display: block; }
.t-default.t-cart .t-row { width: 100%; display: block; position: relative; }
.t-default.t-cart .col { display: inline-block; vertical-align: middle; border-bottom: none; text-align: center; }
.t-default.t-cart .t-head .t-row { border-bottom: 1px solid #e1e1e1; background: #fff; }
.t-default.t-cart .t-head .col { color: #000; font-weight: bold; }
.t-default.t-cart .t-head .col-cart-name { text-align: center; }
.t-default.t-cart .t-body .t-row { border-bottom: 1px solid #e1e1e1; }
.t-default.t-cart .t-body .t-row.t-row--add { position: relative; }
.t-default.t-cart .t-body .t-row.t-row--add:before { content: ""; width: 120px; height: 1px; position: absolute; left: 0; bottom: -1px; background: #fff; }
.t-default.t-cart .t-body .t-row.t-row--add.t-row--gift:last-child:before { content: ""; width: 100%; height: 1px; position: absolute; left: 0; bottom: -1px; background: #fff; }
.t-default.t-cart .t-body .btn-gift-modify { display: inline-block; text-align: center; width: 100px; font-size: 0.8rem; background: #aaa; border-radius: 3px; color: #fff; padding: 0px; }

.t-default.t-cart .t-body .btn-gift-modify:hover { background: #666 }
.t-default.t-cart .t-body .btn-gift-modify:before { content: 'Modify'; display: block; }
.t-default.t-cart .t-body .btn-gift-modify.open {margin: 0 auto;  display: block; background: #666 }
.t-default.t-cart .t-body .btn-gift-modify.open:before { content: 'Close'; display: block; }
.t-default.t-cart .t-body .btn-gift-modify.add { margin: 0 auto; display: block;  }
.t-default.t-cart .t-body .btn-gift-modify.add:before { content: 'Modify'; display: block; }
.t-default.t-cart .t-body .btn-gift-modify.add.open:before { content: 'Close'; display: block; }
.t-default.t-cart .t-body .btn-gift-modify.add-good { margin: 0 auto; display: block;  }
.t-default.t-cart .t-body .btn-gift-modify.add-good:before { content: 'Modify'; display: block; }
.t-default.t-cart .t-body .btn-gift-modify.add-good.open:before { content: 'Close'; display: block; }


.t-default.t-cart .t-body .gift-table { background: #fff; padding: 20px; width: 100%; display: none; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); text-align: right; /* position: absolute; left: 50%; top: 100%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 2 */ }
.t-default.t-cart .t-body .gift-table table { width: 100%; margin: 0 auto; font-size: 16px; text-align: center }
.t-default.t-cart .t-body .gift-table table .btn-theme { padding: 0px; height: 30px; margin: 0 5px; line-height: 30px; width: 80px; }
.t-default.t-cart .t-body .gift-table table td:last-child { width: 190px; }
.t-default.t-cart .t-body .t-row.t-row--add .col-cart-img { width: 120px; }
.t-default.t-cart .tag-add,
.t-default.t-cart .tag-gift { font-size: 0.875rem; border: 1px solid #45968f; background-color: #fff; color: #45968f; vertical-align: middle; text-align: center; padding: 0 10px; display: inline-block; line-height: 1.4; border-radius: 3px; white-space: nowrap; }
.t-default.t-cart .tag-img { max-width: 40px; max-height: 40px; display: inline-block; vertical-align: middle; border: 1px solid transparent; }
.t-default.t-cart .tag-img img { max-width: 100%; max-height: 100%; }
.t-default.t-cart a:hover .tag-img { border: 1px solid #e1e1e1; }
.t-default.t-cart .col-cart-img { position: relative; width: 120px; }
.t-default.t-cart .col-cart-img a { width: 100%; margin: 0 auto; position: relative; overflow: hidden; border: 1px solid transparent; display: block; }
.t-default.t-cart .col-cart-img a:hover { border: 1px solid #e1e1e1; }
.t-default.t-cart .col-cart-img a:before { content: ""; position: relative; display: block; width: 100%; padding-bottom: 100%; }
.t-default.t-cart .col-cart-img a img { max-width: 100%; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.t-default.t-cart .col-cart-name { text-align: left; width: calc((100% - 240px) * 0.4); line-height: 1.5; }
.t-default.t-rtn .t-default.t-cart .col-cart-name.no-feature { width: calc((100% - 440px) * 0.6); }
.t-default.t-cart .col-cart-name.no-feature { width: calc((100% - 340px) * 0.8); }
.t-default.t-rtn .t-default.t-cart .t-row--gift .col-cart-name,
.t-default.t-rtn .t-default.t-cart .t-row--gift .col-cart-name.no-feature { width: calc(((100% - 440px) * 0.8) + 200px); }
.t-default.t-cart .col-cart-name a { color: #222; }
.t-default.t-cart .col-cart-name a:hover { color: #45968f; }
.t-default.t-cart .col-cart-name .name { display: block; color: #222; font-size: 1rem; }
.t-default.t-cart .col-cart-name .notice { color: #999; font-size: 0.9375rem; display: block; word-wrap: break-word; word-break: break-all;}
.t-default.t-cart .col-cart-feature { width: calc((100% - 240px) * 0.2); }
.t-default.t-cart .col-cart-feature span { display: block; }
.t-default.t-cart .col-cart-price { width: calc((100% - 240px) * 0.1); color: #45968f; font-weight: 600; }
.t-default.t-cart .col-cart-price:before { color: #282828; font-weight: normal; }
.t-default.t-cart .col-cart-num { width: 100px; }
.t-default.t-cart .col-cart-num .qty-wrap { display: inline-block; }
.t-default.t-cart .col-cart-sum { width: calc((100% - 340px) * 0.25); }
.t-default.t-rtn .t-default.t-cart .t-row--gift .col-cart-sum { width: calc((100% - 440px) * 0.2); }
.t-default.t-cart .col-cart-op { width: 95px; white-space: nowrap; padding: 13px 0;}
.t-default.t-track { margin-bottom: 50px; }
.t-default.t-track .info { display: table-row; width: 100%; text-transform: capitalize;}
.t-default.t-track .t-row { width: 100%; display: table; }
.t-default.t-track .col { display: table-cell; vertical-align: middle; border-bottom: none; }
.t-default.t-track .t-head .col-track-name { text-align: center; }
.t-default.t-track .t-body .t-row { border-bottom: 1px solid #e1e1e1; }
.t-default.t-track .t-body .col { border-left: 1px solid #e1e1e1; }
.t-default.t-track .t-body .col:first-child { border-left: none; }
.t-default.t-track .col-track-img { width: 120px; }
.t-default.t-track .col-track-img a { width: 100%; margin: 0 auto; position: relative; overflow: hidden; border: 1px solid transparent; display: block; }
.t-default.t-track .col-track-img a:hover { border: 1px solid #e1e1e1; }
.t-default.t-track .col-track-img a:before { content: ""; position: relative; display: block; width: 100%; padding-bottom: 100%; }
.t-default.t-track .col-track-img a img { max-width: 100%; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.t-default.t-track .col-track-name { text-align: left; width: calc(100% - 720px); }
.t-default.t-track .col-track-name a { color: #222; }
.t-default.t-track .col-track-name a:hover { color: #45968f; }
.t-default.t-track .col-track-name .name { display: block; color: #222; font-size: 1rem; }
.t-default.t-track .col-track-name .notice { color: #999; font-size: 0.9375rem; display: block; }
.t-default.t-track .col-track-feature { width: 120px; }
.t-default.t-track .col-track-feature span { display: block; }
.t-default.t-track .col-track-price { width: 120px; }
.t-default.t-track .col-track-date { width: 120px; }
.t-default.t-track .col-track-state { width: 120px; }
.t-default.t-track .col-track-op { width: 120px; white-space: nowrap; }
.t-default.t-coupon { margin-bottom: 50px; }
.t-default.t-coupon .info { align-items: center; }
.t-default.t-coupon .t-head .col-coupon-name { text-align: center; }
.t-default.t-coupon .t-body .t-row { border-bottom: 1px solid #e1e1e1; }
.t-default.t-coupon .t-body .t-row.nodata { border-top: 1px solid #e1e1e1; }
.t-default.t-coupon .col { border-bottom: none; }
.t-default.t-coupon .col-coupon-icon { width: 190px; }
.t-default.t-coupon .col-coupon-name { width: calc(100% - 670px); text-align: left; }
.t-default.t-coupon .col-coupon-name strong { color: #222; display: block; }
.t-default.t-coupon .col-coupon-name .desc { color: #666; display: block; line-height: 1.5; }
.t-default.t-coupon .col-coupon-price { width: 120px; }
.t-default.t-coupon .col-coupon-store { width: 120px; }
.t-default.t-coupon .col-coupon-date { width: 120px; }
.t-default.t-coupon .col-coupon-state { width: 120px; }
.t-default.t-invc { margin-bottom: 50px; }
.t-default.t-invc .info { align-items: center; }
.t-default.t-invc .t-row { border-bottom: 1px solid #e1e1e1; }
.t-default.t-invc .col { border-bottom: none; }
.t-default.t-invc .input-style { text-align: center; background: #f2f2f2; border: 1px solid #eee; vertical-align: middle; height: 40px; margin-top: -4px; margin-bottom: -4px; }
.t-default.t-invc .input-style:focus { border: 1px solid #ddd; }
.t-default.t-invc .input-style[readonly] { border: none; background: #f5f5f5; }
.t-default.t-invc .col-invc-num { width: 80px; }
.t-default.t-invc .col-invc-title { width: calc((100% - 230px) * 0.6); }
.t-default.t-invc .col-invc-id { width: calc((100% - 230px) * 0.4); }
.t-default.t-invc .col-invc-op { width: 150px; }
.t-default.t-receiver { margin-bottom: 50px; }
.t-default.t-receiver .info { /* align-items: center;  */}
.t-default.t-receiver .t-row { align-items: center; border-bottom: 1px solid #e1e1e1; }
.t-default.t-receiver .col { border-bottom: none; padding-left: 10px; padding-right: 10px; vertical-align: middle; }
.t-default.t-receiver .t-head .t-row { border-bottom: none; }
.t-default.t-receiver .t-head .col { text-align: center; }
.t-default.t-receiver .input-style,
.t-default.t-receiver .textarea-style{ text-align: center; background: #f2f2f2; border: 1px solid #eee; vertical-align: middle; height: 40px; margin-top: -4px; margin-bottom: -4px; }
.t-default.t-receiver .select-style { text-align: center; background: url("../images/select_aw.png") right 0 no-repeat #eee; background-size: auto 100%; vertical-align: middle; height: 40px; margin-top: -2px; margin-bottom: -2px; text-align: center; border: #eee; text-align-last:center;}
.t-default.t-receiver .input-style:focus,
.t-default.t-receiver .textarea-style:focus,
.t-default.t-receiver .select-style:focus { border: 1px solid #ddd; }
.t-default.t-receiver .input-style[readonly],
.t-default.t-receiver .textarea-style[readonly] { border: none; background: none; }
.t-default.t-receiver .textarea-style { max-height: 95px; vertical-align: middle; padding: 10px; line-height: 1.5; height: auto; text-align: left; }
.t-default.t-receiver .col-receiver-name { width: 265px; }
.t-default.t-receiver .col-receiver-name .checkdata.is-hide { display: none; }
.t-default.t-receiver .col-receiver-name .form-box { padding-left: 0; display: inline-block; vertical-align: middle; margin-bottom: 0; }
.t-default.t-receiver .col-receiver-name .form-box.form-sex { padding-right: 0; }
.t-default.t-receiver .col-receiver-name .form-box .input-style { height: 40px; margin-bottom: 10px; }
.t-default.t-receiver .col-receiver-name .form-box .form-gp { width: 100%; display: block; position: relative; min-height: 40px; line-height: 40px; }
.t-default.t-receiver .col-receiver-name .form-box .form-gp .radio-theme { line-height: 40px; }
.t-default.t-receiver .col-receiver-name .form-box.is-hide { display: none; }
.t-default.t-receiver .col-receiver-tel { width: 180px; }
.t-default.t-receiver .col-receiver-tel .input-style { font-size: 0.9375rem; height: 40px; }
.t-default.t-receiver .col-receiver-tel .input-style:first-child { margin-bottom: 10px; }
.t-default.t-receiver .col-receiver-op { width: 200px; text-align: center; white-space: nowrap; line-height: 40px; }
.t-default.t-receiver .col-receiver-address { text-align: left; width: calc(100% - 265px - 180px - 200px); }
.t-default.t-receiver .col-receiver-address .form-box.form-address{ padding: 0; }
.t-default.t-receiver .col-receiver-address .input-style[placeholder=address]{ width: calc(100% - 8px);  }
.t-default.t-receiver .col-receiver-address .input-style[placeholder=Floor]{ width: calc(40% - 8px)  }
.t-default.t-receiver .col-receiver-address .input-style[placeholder=City]{ width: calc(60% - 8px)  }


.t-default .op-edit,
.t-default .op-save,
.t-default .op-del,
.t-default .op-mainadd,
.t-default .op-view { font-size: 0; position: relative; display: inline-block; vertical-align: middle; line-height: 1; }
.t-default .op-edit.is-hide,
.t-default .op-save.is-hide,
.t-default .op-del.is-hide,
.t-default .op-mainadd.is-hide,
.t-default .op-view.is-hide { display: none; }
.t-default .op-edit:before,
.t-default .op-save:before,
.t-default .op-del:before,
.t-default .op-mainadd:before,
.t-default .op-view:before { font-size: 1.125rem; line-height: 1.2; display: inline-block; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 400; margin-left: 5px; color: #999; }
.t-default .op-edit:hover:before,
.t-default .op-save:hover:before,
.t-default .op-del:hover:before,
.t-default .op-mainadd:hover:before,
.t-default .op-view:hover:before { color: #666; }
.t-default .op-del { margin-left: 26px; }
.t-default .op-del:after { content: ""; width: 1px; height: 15px; background: #999; position: absolute; top: 3px; left: -13px; }
.t-default .op-del.op-del--cart { margin: 0 auto; display: block; text-align: center; background: #fff; border-radius: 50%; }
.t-default .op-del.op-del--cart:before {margin: 5px auto; display: block; text-align: center;  line-height: 1; font-size: 1.5rem; }
.t-default .op-del.op-del--cart:after { display: none; }
.t-default .op-save:before { color: #45968f; font-size: 1.25rem; }
.t-default .op-save:hover:before { color: #4aa099; }
.t-default .op-view:before { content: ""; }
.t-default .op-edit:before { content: ""; }
.t-default .op-save:before { content: ""; }
.t-default .op-del:before { content: ""; }
.t-default .op-mainadd { font-size: 0.9375rem; margin: 0 auto; display: block; width: 175px; background: #f6f6f6; color: #9b9b9b; height: 30px; line-height: 30px; text-align: center;}
.t-default .op-mainadd:before { display: none; }
.t-default .op-mainadd:after { display: none; }
.t-default .op-mainadd:hover { color: #333; }
.t-default .op-mainadd.is-main {color: #fff; background: #45968f; }
.t-default .op-mainadd.is-main:hover { color: #fff; }
.t-default.t-iq { margin-bottom: 20px; border: 1px solid #e1e1e1; border-bottom: none; }
.t-default.t-iq .col-iq-date { width: 14%; }
.t-default.t-iq .col-iq-num { width: 14%; }
.t-default.t-iq .col-iq-type { width: 13%; }
.t-default.t-iq .col-iq-title { width: 30%; }
.t-default.t-iq .col-iq-state { width: 15%; }
.t-default.t-iq .col-iq-more { width: 15%; }
.t-default.t-iq .btn-link-detail { display: inline-block; vertical-align: middle; width: 130px; height: 35px; line-height: 35px; text-align: center; color: #222; background: #fff; margin-top: -2px; border: 1px solid #ddd; border-radius: 3px; }
.t-default.t-iq .btn-link-detail:hover { color: #fff; background: #666; border-color: #666; }
.t-default.t-iq .btn-link-detail span:after { content: ""; display: inline-block; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; line-height: 15px; margin-left: 5px }
.t-default.t-rp { border: 1px solid #e1e1e1; margin: 25px 0; }
.t-default.t-rp:last-of-type { border-bottom: 1px solid #e1e1e1; }
.t-default.t-rp .t-row.nodata .col { border-bottom: none; }
.t-default.t-rp .t-head .t-row .col { border-bottom: none; }
.t-default.t-rp .col-rp-num { width: 20%; }
.t-default.t-rp .col-rp-date { width: 20%; }
.t-default.t-rp .col-rp-pname { width: 40%; }
.t-default.t-rp .col-rp-state { width: 20%; }
.t-default.t-rp .btn-link-detail { display: inline-block; vertical-align: middle; width: auto; height: 35px; line-height: 35px; padding: 0 15px; text-align: center; color: #45968f; margin-top: -2px; border-radius: 3px; }
.t-default.t-rp .btn-link-detail:hover { color: #666; }
.t-default.t-rp .btn-link-detail span:before { content: ""; display: inline-block; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; margin-right: 15px; }
.t-default.t-rp .fee { font-size: 1rem; margin: 0 20px; }
.t-default.t-rp .fee .subtitle { display: block; background: #f5f5f5; color: #333; font-size: 1rem; padding: 10px 15px; border-top: 1px solid #333; margin: 0 auto; }
.t-default.t-rp .fee .quote { padding: 20px 25px; }
.t-default.t-rp .fee .quote .state-select { padding-right: 240px; position: relative; }
.t-default.t-rp .fee .quote .state-select .price strong { color: #45968f; }
.t-default.t-rp .fee .quote .state-select .btns { position: absolute; top: 0; right: 0; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #222; background-color: #222; color: #fff; overflow: hidden; height: 30px; line-height: 30px; width: 110px; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree:link { color: #fff; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree:link:hover { color: #fff; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree:hover { color: #fff; background: #555; border-color: #333; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #ddd; background-color: #fff; color: #666; overflow: hidden; margin-left: 10px; height: 30px; line-height: 30px; width: 110px; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree:link { color: #666; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree:link:hover { color: #333; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree:hover { color: #333; background: #fff; border-color: #666; }
.t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.t-default.t-rp .fee .etc-fee { padding: 20px 25px; border-top: 1px solid #eee; }
.t-default.t-rp .fee .etc-fee li { display: block; }
.t-default.t-rp .fee .etc-fee li strong { color: #45968f; }
.t-default.t-rp .fee .etc-fee li a { margin-left: 5px; color: #000071; border-bottom: 1px solid #000071; }
.t-default.t-rp .fee .etc-fee li a:hover { color: #2020b5; bordre-bottom: 1px solid #2020b5; }
.t-default.t-rp .detail-trigger { font-size: 1rem; padding: 10px 0; margin: 0 25px; }
.t-default.t-od { border: 1px solid #e1e1e1; margin: 25px auto; }
.t-default.t-od .t-row.nodata .col { border-bottom: none; }
.t-default.t-od .t-head .t-row .col { border-bottom: none; }
.t-default.t-od .col-od-num { width: 28%; }
.t-default.t-od .col-od-date { width: 12%; }
.t-default.t-od .col-od-price { width: 12%; }
.t-default.t-od .col-od-state { width: 12%; }
.t-default.t-od .col-od-payment { width: 12%; }
.t-default.t-od .col-od-paystate { width: 12%; }
.t-default.t-od .t-body .col-od-paystate { color: #45968f; }
.t-default.t-od .t-body .col-od-paystate:before { color: #282828 }
.t-default.t-od .col-od-invc { width: 12%; }
.t-default.t-od .col-od-invc a { color: #666; display: inline-block; text-decoration: underline; margin: 0 0 0 3px; }
.t-default.t-od .col-od-invc a:hover { color: #45968f; }
.t-default.t-od.no-invc .col-od-state { width: 20%; }
.t-default.t-od.no-invc .col-od-paystate { width: 16%; }
.t-default.t-od .info-bottom { position: relative; font-size: 1rem; margin: 0 20px; padding: 20px 0; padding-left: 200px; }
.t-default.t-od .info-bottom .btn-link-detail { position: absolute; top: 20px; left: 20px; display: inline-block; vertical-align: middle; width: auto; height: 35px; line-height: 35px; padding: 0; text-align: center; color: #45968f; margin-top: -2px; border-radius: 3px; }
.t-default.t-od .info-bottom .btn-link-detail:hover { color: #666; }
.t-default.t-od .info-bottom .btn-link-detail span:before { content: ""; display: inline-block; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; margin-right: 15px; }
.t-default.t-od .info-bottom .btns { text-align: right; }
.t-default.t-od .info-bottom .btns a { position: relative; display: inline-block; vertical-align: top; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #ddd; background-color: #fff; color: #666; overflow: hidden; height: 30px; line-height: 30px; width: 140px; text-align: center; margin-left: 15px; }
.t-default.t-od .info-bottom .btns a:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.t-default.t-od .info-bottom .btns a:link { color: #666; }
.t-default.t-od .info-bottom .btns a:link:hover { color: #333; }
.t-default.t-od .info-bottom .btns a:hover { color: #333; background: #fff; border-color: #666; }
.t-default.t-od .info-bottom .btns a:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.t-default.t-od .info-bottom .btns a.gotopay { background: #000; color: #fff; width: auto }
.t-default.t-od .info-bottom .btns a.gotopay:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.t-default.t-od .info-bottom .btns a.gotopay:link { color: #fff; }
.t-default.t-od .info-bottom .btns a.gotopay:link:hover { color: #fff; }
.t-default.t-od .info-bottom .btns a.gotopay:hover { color: #fff; background: #555; border-color: #333; }
.t-default.t-od .info-bottom .btns a.gotopay:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.t-default.t-od .detail .subtitle { display: block; background: #f5f5f5; position: relative; color: #666; font-size: 1rem; padding: 10px 250px 10px 15px; border-top: 1px solid #333; margin: 20px auto 0 auto; }
.t-default.t-od .detail .subtitle:first-of-type { margin-top: 0; }
.t-default.t-od .detail .subtitle strong { color: #333; }
.t-default.t-od .detail .subtitle .t-invc { width: auto; max-width: 220px; position: absolute; top: 10px; right: 15px; text-align: right; }
.t-default.t-od .detail .subtitle .t-num { display: inline-block; vertical-align: middle; margin-right: 20px; }
.t-default.t-od .detail .subtitle .t-ship { display: inline-block; vertical-align: middle; }
.t-default.t-od .detail .subtitle .t-ship br { display: none; }
.t-default.t-od .detail .subtitle .t-ship strong:nth-of-type(2) { margin-left: 15px; }
.t-default.t-od .total-list { font-size: 1rem; width: 320px; display: inline-block; position: relative; vertical-align: top; float: right; padding-right: 10px; }
.t-default.t-od .total-list .btn-wrap { margin-top: 30px; }
.t-default.t-od .total-list .btn-wrap .btn-theme { width: calc(50% - 10px); }
.t-default.t-od .total-list ul li { display: block; position: relative; text-align: right; padding: 5px 0 5px 110px; }
.t-default.t-od .total-list ul li .title { position: absolute; width: 120px; position: absolute; top: 10px; left: 0; text-align: left; font-size: 1rem; color: #666; }
.t-default.t-od .total-list ul li.sum { border-top: 1px solid #ddd; padding-top: 20px; margin-top: 0; font-size: 1.375rem; color: #45968f; font-weight: bold; }
.t-default.t-od .total-list ul li.sum .title { font-size: 1rem; color: #666; top: 20px; font-weight: normal; }
.t-default.t-rtn { border: 1px solid #ddd; margin: 25px 0; }
.t-default.t-rtn .info-bottom { font-size: 1rem; }
.t-default.t-rtn .col-rtn-num { width: 15%; }
.t-default.t-rtn .col-rtn-item { width: 12%; }
.t-default.t-rtn .col-rtn-price { width: 15%; }
.t-default.t-rtn .col-rtn-desc { width: 26%; }
.t-default.t-rtn .col-rtn-progress { width: 14%; }
.t-default.t-rtn .col-rtn-state { width: 18%; }
.t-default.t-rtn .t-body .col-rtn-state { color: #45968f; }
.t-default.t-rtn .t-body .col-rtn-state:before { color: #282828; }
.t-default.t-rtn .info-bottom { position: relative; font-size: 1rem; margin: 0 20px; padding: 20px 0; padding-left: 200px; }
.t-default.t-rtn .info-bottom .btn-link-detail { position: absolute; top: 20px; left: 20px; display: inline-block; vertical-align: middle; width: auto; height: 35px; line-height: 35px; padding: 0; text-align: center; color: #45968f; margin-top: -2px; border-radius: 3px; }
.t-default.t-rtn .info-bottom .btn-link-detail:hover { color: #666; }
.t-default.t-rtn .info-bottom .btn-link-detail span:before { content: ""; display: inline-block; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; margin-right: 15px; }
.t-default.t-rtn .info-bottom .btns { text-align: right; }
.t-default.t-rtn .info-bottom .btns a { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #ddd; background-color: #fff; color: #666; overflow: hidden; height: 30px; line-height: 30px; width: auto; text-align: center; margin-left: 15px; }
.t-default.t-rtn .info-bottom .btns a:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.t-default.t-rtn .info-bottom .btns a:link { color: #666; }
.t-default.t-rtn .info-bottom .btns a:link:hover { color: #333; }
.t-default.t-rtn .info-bottom .btns a:hover { color: #333; background: #fff; border-color: #666; }
.t-default.t-rtn .info-bottom .btns a:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.t-default.t-rtn .info-bottom .btns a.gotopay { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #222; background-color: #222; color: #fff; overflow: hidden; height: 30px; line-height: 30px; width: 110px; text-align: center; margin-left: 0; }
.t-default.t-rtn .info-bottom .btns a.gotopay:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.t-default.t-rtn .info-bottom .btns a.gotopay:link { color: #fff; }
.t-default.t-rtn .info-bottom .btns a.gotopay:link:hover { color: #fff; }
.t-default.t-rtn .info-bottom .btns a.gotopay:hover { color: #fff; background: #555; border-color: #333; }
.t-default.t-rtn .info-bottom .btns a.gotopay:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.t-default.t-rtn .detail .subtitle { display: block; background: #f5f5f5; position: relative; color: #666; font-size: 1rem; padding: 10px 250px 10px 15px; border-top: 1px solid #333; margin: 20px auto 0 auto; }
.t-default.t-rtn .detail .subtitle:first-of-type { margin-top: 0; }
.t-default.t-rtn .detail .subtitle strong { color: #333; }
.t-default.t-rtn .detail .subtitle .t-invc { width: auto; max-width: 220px; position: absolute; top: 10px; right: 15px; text-align: right; }
.t-default.t-rtn .detail .subtitle .t-num { display: inline-block; vertical-align: middle; margin-right: 20px; }
.t-default.t-rtn .detail .subtitle .t-ship { display: inline-block; vertical-align: middle; }
.t-default.t-rtn .detail .subtitle .t-ship br { display: none; }
.t-default.t-rtn .detail .subtitle .t-ship strong:nth-of-type(2) { margin-left: 15px; }
.t-default.t-rtn .total-list { font-size: 1rem; width: 320px; display: inline-block; position: relative; vertical-align: top; float: right; padding-right: 10px; }
.t-default.t-rtn .total-list .btn-wrap { margin-top: 30px; }
.t-default.t-rtn .total-list .btn-wrap .btn-theme { width: calc(50% - 10px); }
.t-default.t-rtn .total-list ul li { display: block; position: relative; text-align: right; padding: 5px 0 5px 110px; }
.t-default.t-rtn .total-list ul li .title { position: absolute; width: 150px; position: absolute; top: 10px; left: 0; text-align: left; font-size: 1rem; color: #666; }
.t-default.t-rtn .total-list ul li.sum { border-top: 1px solid #ddd; padding-top: 20px; margin-top: 0; font-size: 1.375rem; color: #45968f; font-weight: bold; }
.t-default.t-rtn .total-list ul li.sum .title { font-size: 1rem; color: #666; top: 20px; font-weight: normal; }
.t-default.t-rtncheck { border: 1px solid #e1e1e1; margin-bottom: 20px; }
.t-default.t-rtncheck .t-body .col { border-bottom: none; border-top: 1px solid #e1e1e1; font-size: 1rem; }
.t-default.t-rtncheck .col-rtncheck-op { width: 60px; padding-left: 0; padding-right: 0; text-align: center; }
.t-default.t-rtncheck .col-rtncheck-op:before { display: none !important; }
.t-default.t-rtncheck .radio-theme { line-height: 40px; height: 40px; }
.t-default.t-rtncheck .col-rtncheck-op .checkbox-theme { margin: 0; display: inline-block; }
.t-default.t-rtncheck .col-rtncheck-op .checkbox-theme input + span { margin: 0; }
.t-default.t-rtncheck .col-rtncheck-ptype { width: calc((100% - 610px) * 0.16); }
.t-default.t-rtncheck .col-rtncheck-pcode { width: calc((100% - 610px) * 0.16); }
.t-default.t-rtncheck .col-rtncheck-pname { width: calc((100% - 610px) * 0.46); }

/* .t-default.t-rtncheck .t-row--gift .col-rtncheck-ptype { width: calc((100% - 610px) * 0.16); }
.t-default.t-rtncheck .t-row--gift .col-rtncheck-pcode { width: calc((100% - 610px) * 0.16); }
.t-default.t-rtncheck .t-row--gift .col-rtncheck-pname { width: calc(((100% - 610px) * 0.68) + 150px); } */
.t-default.t-rtncheck .col-rtncheck-pname.no-feature { width: calc((100% - 610px) * 0.68); }
.t-default.t-rtncheck .col-rtncheck-feature { width: calc((100% - 610px) * 0.22); }
.t-default.t-rtncheck .col-rtncheck-num { width: 150px; }
.t-default.t-rtncheck .col-rtncheck-state { width: 200px; }
.t-default.t-rtncheck .col-rtncheck-state .select-style { display: inline-block; }
.t-default.t-rtncheck .t-body .col-rtn-state { color: #45968f; }
.t-default.t-rtncheck .t-body .col-rtn-state:before { color: #282828; }
.t-default.t-rtncheck .checkbox-theme { line-height: 1; }
.t-default.t-rtncheck .qty-wrap { width: 140px; }
.t-default.t-rtncheck .qty-wrap a { width: 40px; }
.t-default.t-rtncheck .qty-wrap input { width: calc(100% - 80px); }
@media (max-width:1366px) {
  .t-default.t-od .col-od-num { width: 100%; }
  .t-default.t-od .col-od-date { width: 50%; }
  .t-default.t-od .col-od-price { width: 50%; }
  .t-default.t-od .col-od-state { width: 50%; }
  .t-default.t-od .col-od-payment { width: 50%; }
  .t-default.t-od .col-od-paystate { width: 50%; }
  .t-default.t-od .col-od-invc { width: 50%; }
  .t-default.t-od .info-bottom { padding-left: 200px; }
  .t-default.t-od .info-bottom .btns a { max-width: none; width: calc((100% / 3.1) - 15px); margin-bottom: 10px; }
  .t-default.t-od .info-bottom .btns a.gotopay { max-width: none; width: calc((100% / 3.1) - 15px); margin-bottom: 10px; margin-left: 10px; }
  .t-default.t-rtn .info-bottom { padding-left: 200px; }
  .t-default.t-rtn .info-bottom .btns a { max-width: none; margin-bottom: 10px; }
  .t-default.t-rtn .info-bottom .btns a.gotopay { max-width: none; width: calc((100% / 3.1) - 15px); margin-bottom: 10px; margin-left: 10px; }
  .t-default.t-cart .col-cart-img { position: relative; width: 120px; }
  .t-default.t-cart .col-cart-name { width: calc((100% - 320px) * 0.4); padding-right: 30px !important; }
  .t-default.t-cart .col-cart-name.no-feature { width: calc((100% - 320px) * 0.8); }
  .t-default.t-rtn .t-default.t-cart .t-row--gift .col-cart-name,
  .t-default.t-rtn .t-default.t-cart .t-row--gift .col-cart-name.no-feature { width: calc(((100% - 320px) * 0.8) + 150px); }
  .t-default.t-rtn .t-default.t-cart .col-cart-name.no-feature { width: calc((100% - 320px) * 0.6); }
  .t-default.t-cart .col-cart-feature { width: calc((100% - 320px) * 0.2); }
  .t-default.t-cart .col-cart-price { width: calc((100% - 320px) * 0.2); }
  .t-default.t-cart .col-cart-num { width: 150px; }
  .t-default.t-cart .col-cart-num .qty-wrap { width: 130px; }
  .t-default.t-cart .col-cart-sum,
  .t-default.t-cart .col-cart-pstate { width: calc((100% - 320px) * 0.2); }
  .t-default.t-rtn .t-default.t-cart .t-row--gift .col-cart-sum { width: calc((100% - 320px) * 0.2); }
  .t-default.t-cart .col-cart-op { width: 50px; padding: 0; }
  .t-default.t-track .col-track-img { width: 120px; }
  .t-default.t-track .col-track-name { width: calc(100% - 600px); }
  .t-default.t-track .col-track-feature { width: 120px; }
  .t-default.t-track .col-track-price { width: 100px; }
  .t-default.t-track .col-track-date { width: 100px; }
  .t-default.t-track .col-track-state { width: 100px; }
  .t-default.t-track .col-track-op { width: 100px; white-space: nowrap; }
  .t-default.t-coupon .col-coupon-icon { width: 180px; }
  .t-default.t-coupon .col-coupon-name { width: calc(100% - 490px); }
  .t-default.t-coupon .col-coupon-price { width: 80px; }
  .t-default.t-coupon .col-coupon-store { width: 110px; }
  .t-default.t-coupon .col-coupon-date { width: 100px; }
  .t-default.t-coupon .col-coupon-state { width: 100px; }
  .t-default.t-rtncheck { border-top: none; }
  .t-default.t-rtncheck .t-head { display: none; }
  .t-default.t-rtncheck .t-body .t-row { padding: 0 0 0 60px; position: relative; }
  .t-default.t-rtncheck .t-body .col { padding: 5px; border-left: 1px solid #e1e1e1; text-align: left; }
  .t-default.t-rtncheck .col:before { content: attr(data-tit) "："; display: inline-block; }
  .t-default.t-rtncheck .t-body .info { display: block; }
  .t-default.t-rtncheck .col-rtncheck-op { width: 60px; position: absolute; left: 0; top: 0; border-left: none !important; text-align: center !important; }
  .t-default.t-rtncheck .col-rtncheck-ptype { width: 100% }
  .t-default.t-rtncheck .col-rtncheck-pcode { width: 100% }
  .t-default.t-rtncheck .col-rtncheck-pname { width: 100% }
  .t-default.t-rtncheck .t-row--gift .col-rtncheck-ptype,
  .t-default.t-rtncheck .t-row--gift .col-rtncheck-pcode,
  .t-default.t-rtncheck .t-row--gift .col-rtncheck-pname { width: 100% }
  .t-default.t-rtncheck .col-rtncheck-pname.no-feature { width: 100% }
  .t-default.t-rtncheck .col-rtncheck-feature { width: 100% }
  .t-default.t-rtncheck .col-rtncheck-num { width: 100% }
  .t-default.t-rtncheck .qty-wrap { display: inline-block; }
  .t-default.t-rtncheck .col-rtncheck-state { width: 100% }
  .t-default.t-rtncheck .col-rtncheck-state .select-style { width: 200px; }
  .t-default.t-receiver .form-box.form-address{ padding: 0; }
  .t-default.t-receiver .form-box.form-address .form-gp .address_area_tw .input-style,
  .t-default.t-receiver .form-box.form-address .form-gp .address_area_tw .select-style{ width: 100%;margin: 0 0 4px 0 }
  .t-default.t-receiver .form-box.form-sex .input-style{ width: 100%; display: inline-block; margin-bottom: 5px;}
  .t-default.t-receiver .col{ padding-left: 5px; padding-right: 5px; }
  .t-default.t-receiver .col-receiver-name { width: 15%; }
  .t-default.t-receiver .col-receiver-tel { width: 20%; }
  .t-default.t-receiver .col-receiver-op { width: 25%; text-align: center; white-space: nowrap; line-height: 40px; }
  .t-default.t-receiver .col-receiver-address { text-align: left; width: 40%; }
  .t-default .op-mainadd{ padding:5px 10px;width: auto; height: auto; white-space: initial; line-height: 1.2}
}
@media (max-width:1199px) {
  .t-default.t-od .info-bottom{ padding-left: 150px; }
  .t-default.t-od .info-bottom .btn-link-detail{left: 0}
  .t-default.t-od .detail .subtitle { padding: 10px; }
  .t-default.t-od .detail .subtitle .t-ship { display: block; }
  .t-default.t-od .detail .subtitle .t-invc { width: auto; max-width: none; position: relative; top: auto; right: auto; text-align: left; display: block; }
  .t-default.t-rtn .detail .subtitle { padding: 10px; }
  .t-default.t-rtn .detail .subtitle .t-ship { display: block; }
  .t-default.t-rtn .detail .subtitle .t-invc { width: auto; max-width: none; position: relative; top: auto; right: auto; text-align: left; display: block; }
  .t-default.t-rtn > .t-body > .info { display: block; }
  .t-default.t-rtn > .t-body > .t-row > .col:nth-of-type(even) { border-left: 1px solid #e1e1e1; }
  .t-default.t-rtn > .t-body > .t-row > .col { text-align: left; }
  .t-default.t-rtn > .t-body > .t-row > .col:before { content: attr(data-tit) "："; display: inline-block; }
  .t-default.t-rtn .col-rtn-num { width: 50%; display: inline-block; }
  .t-default.t-rtn .col-rtn-item { width: 50%; display: inline-block; }
  .t-default.t-rtn .col-rtn-price { width: 50%; display: inline-block; }
  .t-default.t-rtn .col-rtn-desc { width: 50%; display: inline-block; }
  .t-default.t-rtn .col-rtn-progress { width: 50%; display: inline-block; }
  .t-default.t-rtn .col-rtn-state { width: 50%; display: inline-block; }
  .t-default.t-receiver .col-receiver-name { width: 20%; }
   .t-default.t-receiver .col-receiver-op { width: 20%;}
}
@media (max-width:991px) {
  .t-default.t-od .detail .subtitle .t-ship br { display: inline-block; }
  .t-default.t-od .detail .subtitle .t-ship strong:nth-of-type(2) { margin-left: 0 }
  .t-default.t-rtn .detail .subtitle .t-ship br { display: inline-block; }
  .t-default.t-rtn .detail .subtitle .t-ship strong:nth-of-type(2) { margin-left: 0 }
  .t-default .t-head { display: none; }
  .t-default .t-body .t-row { display: block; border-bottom: none; margin: 0 auto; }
  .t-default .t-body .info { display: block; border-left: none; border-right: none; }
  .t-default .t-body .col { padding: 10px; display: inline-block;}
  .t-default .t-body .col:before { content: attr(data-tit) "："; display: inline-block; }
  .t-default .t-body .detail { padding: 15px; border-left: none; border-right: none; }
  .t-default.t-cart .t-body .t-row { margin-bottom: 0; }
  .t-default.t-cart .t-body .t-row.t-row--add { background: #f8f8f8; }
  .t-default.t-cart .t-body .t-row.t-row--add:before { display: none; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-img { display: none; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-name { width: calc(100% - 300px); }
  .t-default.t-rtn .t-default.t-cart .t-row--add .col-cart-name,
  .t-default.t-rtn .t-default.t-cart .t-row--add .col-cart-name.no-feature { width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-feature { width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-num { width: 100%; border-top: 1px solid #e1e1e1 }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-num .qty-wrap { margin-top: -5px; margin-bottom: -5px; vertical-align: middle; max-width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-sum { width: 50%; border-top: 1px solid #e1e1e1 }
  .t-default.t-rtn .t-default.t-cart .t-body .t-row.t-row--add .col-cart-sum { width: 100%; }
  .t-default.t-cart .col-cart-img { position: relative; width: 120px; display: inline-block; vertical-align: middle; }
  .t-default.t-cart .col-cart-img:before { display: none; }
  .t-default.t-cart .col-cart-name { width: calc(100% - 120px); display: inline-block; vertical-align: middle; }
  .t-default.t-cart .col-cart-feature { border-top: 1px solid #e1e1e1; width: 50%; }
  .t-default.t-cart .col-cart-feature span { display: inline-block; margin-right: 20px; }
  .t-default.t-cart .col-cart-price { border-top: 1px solid #e1e1e1; width: 50%; }
  .t-default.t-cart .col-cart-num { width: 50%; }
  .t-default.t-cart .col-cart-num .qty-wrap { width: 200px; max-width: calc(100% - 100px); }
  .t-default.t-cart .col-cart-sum { width: 50%; }
  .t-default.t-cart .col-cart-op { width: auto; position: absolute; top: 0; right: 8px; padding: 0; z-index: 10 }
  .t-default.t-cart .col-cart-op:before { display: none; }
  .t-default.t-cart .col-cart-op .op-del--cart:before { font-size: 1.5rem; }
  .t-default.t-track .info { display: block; }
  .t-default.t-track .t-row { margin: 0 auto 20px auto; display: block; position: relative; padding-left: 120px; min-height: 120px; border: 1px solid #e1e1e1; }
  .t-default.t-track .t-row.nodata { min-height: auto; padding: 0; border: 1px solid #e1e1e1; }
  .t-default.t-track .t-row.nodata .col { border: none; }
  .t-default.t-track .t-body .col { display: block; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; }
  .t-default.t-track .t-body .col:first-child { border-top: none; }
  .t-default.t-track .col-track-img { width: 100px; position: absolute; top: 10px; left: 10px; border-left: none; padding: 0; }
  .t-default.t-track .col-track-img:before { display: none; }
  .t-default.t-track .col-track-name { text-align: left; width: 100%; border-top: none !important; }
  .t-default.t-track .col-track-name:before { display: none; }
  .t-default.t-track .col-track-feature { width: 100%; }
  .t-default.t-track .col-track-feature span { display: inline-block; margin-right: 20px; }
  .t-default.t-track .col-track-price { width: 100%; }
  .t-default.t-track .col-track-date { width: 100%; }
  .t-default.t-track .col-track-state { width: 100%; }
  .t-default.t-track .col-track-op { width: 100%; }
  .t-default.t-coupon .info { display: block; }
  .t-default.t-coupon .t-row { margin: 0 auto 20px auto; display: block; position: relative; border: 1px solid #e1e1e1; }
  .t-default.t-coupon .t-row.nodata .col { border: none; }
  .t-default.t-coupon .info { align-items: center; }
  .t-default.t-coupon .t-head { display: none; }
  .t-default.t-coupon .t-body .col { border-top: 1px solid #e1e1e1; }
  .t-default.t-coupon .t-body .col:first-of-type { border-top: none; }
  .t-default.t-coupon .col-coupon-icon { width: 100%; }
  .t-default.t-coupon .col-coupon-icon:before { display: none; }
  .t-default.t-coupon .col-coupon-name { width: 100%; }
  .t-default.t-coupon .col-coupon-name .desc { font-size: 0.9375rem; }
  .t-default.t-coupon .col-coupon-name:before { display: none; }
  .t-default.t-coupon .col-coupon-price { width: 50%; }
  .t-default.t-coupon .col-coupon-store { width: 50%; }
  .t-default.t-coupon .col-coupon-date { width: 50%; }
  .t-default.t-coupon .col-coupon-date br { display: none; }
  .t-default.t-coupon .col-coupon-state { width: 50%; }
  .t-default.t-invc .info { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; font-size: 0; display: block \9; }
  .t-default.t-invc .t-head { display: block; }
  .t-default.t-invc .t-body .t-row { margin: 0 auto; border-bottom: 1px solid #e1e1e1; }
  .t-default.t-invc .t-body .col { padding: 10px; text-align: center; }
  .t-default.t-invc .t-body .col:before { display: none; }
  .t-default.t-receiver .info { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; font-size: 0; display: block \9; }
  .t-default.t-receiver .t-head { display: block; }
  .t-default.t-receiver .t-body .t-row { margin: 0 auto; border-bottom: 1px solid #e1e1e1; }
  .t-default.t-receiver .t-body .col { padding: 10px; }
  .t-default.t-receiver .t-body .col:before { display: none; }
  .t-default.t-receiver .col-receiver-name { text-align: center; }
  .t-default.t-receiver .col-receiver-name .form-box .form-gp { width: 100%; }
  .t-default.t-iq .t-body .t-row { position: relative; }
  .t-default.t-iq .t-body .t-row.open .col-iq-num { background: #666; color: #fff; }
  .t-default.t-iq .t-body .t-row.open .col-iq-date { background: #777; color: #ddd; }
  .t-default.t-iq .col-iq-date { width: 95px; text-align: center; position: absolute; font-size: 0.9375rem; top: 0; left: 0; padding: 5px; display: inline-block; border-bottom: none; background: #eee; }
  .t-default.t-iq .col-iq-date:before { display: none; }
  .t-default.t-iq .col-iq-num { width: 100%; background: #f6f6f6; padding-left: 100px; min-height: 43px; white-space: nowrap; text-overflow: ellipsis; }
  .t-default.t-iq .col-iq-type { width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .t-default.t-iq .col-iq-title { width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .t-default.t-iq .col-iq-state { width: 40%; }
  .t-default.t-iq .col-iq-more { width: 60%; }
  .t-default.t-iq .btn-link-detail { height: 32px; line-height: 32px; }
  .t-default.t-rp .t-row { margin-bottom: 0; }
  .t-default.t-rp .t-row.nodata .col { border-bottom: 1px solid #e1e1e1; }
  .t-default.t-rp .t-head { display: none; }
  .t-default.t-rp .t-head .t-row .col { border-bottom: none; }
  .t-default.t-rp .col-rp-num { width: 100%; background: #999; color: #fff; }
  .t-default.t-rp .col-rp-date { width: 100%; }
  .t-default.t-rp .col-rp-pname { width: 100%; }
  .t-default.t-rp .col-rp-state { width: 100%; }
  .t-default.t-od { border: none }
  .t-default.t-od .t-body .t-row:first-of-type { border-top: 1px solid #ddd }
  .t-default.t-od .t-row { border: 1px solid #ddd; }
  .t-default.t-cart .t-body .gift-table { position: absolute; top: 40px; left: 0; z-index: 2 }
  .t-default.t-cart .t-body .gift-table table { width: 100%; }
  .t-default.t-rtn .total-list{ width: 50% }
}
@media (max-width:767px) {
  .t-default.t-od .total-list { width: 100%; display: block; float: none; }
  .t-default.t-od .info-bottom .btn-link-detail { position: relative; display: block; background: #f5f5f5; top: auto; left: auto; }
  .t-default.t-od .info-bottom { padding: 0; margin: 0; }
  .t-default.t-od .info-bottom .btns { padding: 15px 0; text-align: center }
  .t-default.t-od .info-bottom .btns a,
  .t-default.t-od .info-bottom .btns a.gotopay { max-width: none; width: calc((100% / 3.1) - 10px); margin-bottom: 10px; margin-left: 5px; margin-right: 5px; }
  .t-default.t-rtn .total-list { width: 100%; display: block; float: none; }
  .t-default.t-rtn .info-bottom .btn-link-detail { position: relative; display: block; background: #f5f5f5; top: auto; left: auto; }
  .t-default.t-rtn .info-bottom { padding: 0; margin: 0; }
  .t-default.t-rtn .info-bottom .btns { padding: 15px 0; text-align: center }
  .t-default.t-rtn .info-bottom .btns a { max-width: none; /* width: calc((100% / 3.1) - 10px); */ margin-bottom: 10px; margin-left: 5px; margin-right: 5px; }
  .t-default.t-invc .info { display: block; }
  .t-default.t-invc .input-style { display: inline-block; vertical-align: middle; width: calc(100% - 100px); text-align: left; margin: 0; }
  .t-default.t-invc .input-style[readonly] { margin-left: -10px; margin-right: -10px; }
  .t-default.t-invc .t-head { display: none; }
  .t-default.t-invc .t-body .t-row { margin-bottom: 30px; border: 1px solid #e1e1e1; border-bottom: none; padding-left: 40px; position: relative; }
  .t-default.t-invc .t-body .t-row.nodata { padding-left: 0; }
  .t-default.t-invc .t-body .col { display: block; padding: 5px 10px; text-align: left; border-bottom: 1px solid #e1e1e1; }
  .t-default.t-invc .t-body .col:before { content: attr(data-tit) "："; display: inline-block; }
  .t-default.t-invc .t-body .col-invc-num { text-align: center; width: 40px; position: absolute; left: 0; top: 0; bottom: 0; font-size: 1.25rem; font-weight: 600; background: #f8f8f8; color: #999; border-right: 1px solid #e1e1e1; }
  .t-default.t-invc .t-body .col-invc-num:before { display: none; }
  .t-default.t-invc .t-body .col-invc-num span { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .t-default.t-invc .t-body .col-invc-title { width: 100%; }
  .t-default.t-invc .t-body .col-invc-id { width: 100%; }
  .t-default.t-invc .t-body .col-invc-op { padding: 10px; width: 100%; text-align: left; }
  .t-default.t-receiver .info { display: block; }
  .t-default.t-receiver .textarea-style { padding-top: 10px; padding-bottom: 10px; }
  .t-default.t-receiver .input-style,
  .t-default.t-receiver .textarea-style { display: inline-block; vertical-align: middle; text-align: left; margin: 0; }
  .t-default.t-receiver .select-style { text-align-last: unset;}
  .t-default.t-receiver .input-style[readonly],
  .t-default.t-receiver .textarea-style[readonly] { margin-left: -10px; margin-right: -10px; }
  .t-default.t-receiver .t-head { display: none; }
  .t-default.t-receiver .t-body .t-row { margin-bottom: 30px; border: 1px solid #e1e1e1; border-bottom: none; position: relative; }
  .t-default.t-receiver .t-body .t-row.nodata .col { padding-left: 0; text-align: center; }
  .t-default.t-receiver .t-body .col { position: relative; display: block; padding: 5px 10px 5px 150px; min-height: 50px; text-align: left; border-bottom: 1px solid #e1e1e1; }
  .t-default.t-receiver .t-body .col:before { position: absolute; content: attr(data-tit) "："; display: inline-block; width: 90px; left: 0; top: 0; padding: 5px 7px; white-space: nowrap; line-height: 40px; }
  .t-default.t-receiver .col-receiver-name { width: 100%; text-align: left; background: #666; color: #fff; }
  .t-default.t-receiver .col-receiver-name .checkdata { line-height: 40px; }
  .t-default.t-receiver .col-receiver-name .form-box { display: block; padding-right: 100px; }
  .t-default.t-receiver .col-receiver-name .form-box .input-style { color: #fff; background: #666; height: 40px; width: calc((100% - 160px)/2); }
  .t-default.t-receiver .col-receiver-name .form-box .form-gp { width: 150px; position: absolute; top: 0; bottom: 0; }
  .t-default.t-receiver .col-receiver-name .form-box .form-gp .radio-theme { line-height: 38px; color: #ccc; }
  .t-default.t-receiver .col-receiver-name .form-box .form-gp .radio-theme input + span { background: #777; border: none; }
  .t-default.t-receiver .col-receiver-name .form-box .form-gp .radio-theme input:checked + span { background: #333; }
  .t-default.t-receiver .col-receiver-name .form-box .form-gp .radio-theme.is-check { color: #fff; border: 1px solid #fff; }
  .t-default.t-receiver .col-receiver-tel { width: 100%; }
  .t-default.t-receiver .col-receiver-tel .input-style { font-size: 0.9375rem; width: calc(50% - 8px); height: 40px; display: inline-block; }
  .t-default.t-receiver .col-receiver-tel .input-style:first-child { margin-right: 8px; margin-bottom: 0; }
  .t-default.t-receiver .col-receiver-address { width: 100%; }
  .t-default.t-receiver .col-receiver-op { width: 100%; padding-top: 3px; padding-bottom: 3px; }
  .t-default.t-receiver .col-receiver-address .input-style[placeholder=address]{ width: calc(100% - 8px);  }
  .t-default.t-receiver .col-receiver-address .input-style[placeholder=Floor]{ width: calc(40% - 8px)  }
  .t-default.t-receiver .col-receiver-address .input-style[placeholder=City]{ width: calc(60% - 8px)  }
  .t-default.t-coupon .col-coupon-price { width: 100%; }
  .t-default.t-coupon .col-coupon-store { width: 100%; }
  .t-default.t-coupon .col-coupon-date { width: 100%; }
  .t-default.t-coupon .col-coupon-state { width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-name { display: block; width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-num { width: 50%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-num .qty-wrap { max-width: calc(100% - 100px); width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-num:before { display: inline-block; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-sum { width: 50%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-sum:before { display: inline-block; }
  .t-default.t-cart .t-body .t-row.t-row--add.t-row--gift .col-cart-num,
  .t-default.t-cart .t-body .t-row.t-row--add.t-row--gift .col-cart-sum { display: none; }
  .t-default.t-rtn .t-default.t-cart .t-body .t-row.t-row--add.t-row--gift .col-cart-num,
  .t-default.t-rtn .t-default.t-cart .t-body .t-row.t-row--add.t-row--gift .col-cart-sum { display: block; }
  .t-default .op-mainadd{ display: inline-block; margin-left: 20px; }
}
@media (max-width:639px) {
  .t-default .t-body .col { width: auto; display: block; padding: 8px; }
  .t-default.t-cart .t-body .t-row { margin-bottom: 0; }
  .t-default.t-cart .t-body .t-row.t-row--add { background: #f8f8f8; border-bottom-width: 2px; padding-top: 0; padding-bottom: 0; }
  .t-default.t-cart .t-body .t-row.t-row--add:before { display: none; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-num { width: 100%; display: block; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-num .qty-wrap { max-width: calc(100% - 100px); width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-sum { width: 100%; }
  .t-default.t-cart .col-cart-img { display: inline-block; width: 120px; }
  .t-default.t-cart .col-cart-name { display: inline-block; width: calc(100% - 120px); }
  .t-default.t-cart .col-cart-feature { border-top: 1px solid #e1e1e1; width: 100%; }
  .t-default.t-cart .col-cart-price { border-top: 1px solid #e1e1e1; width: 100%; }
  .t-default.t-cart .col-cart-num { border-top: 1px solid #e1e1e1; width: 100%; }
  .t-default.t-cart .col-cart-num .qty-wrap { height: 35px; padding-left: 35px; padding-right: 35px; margin-top: -2px; margin-bottom: -2px; max-width: calc(100% - 100px); width: 100%; overflow: hidden; vertical-align: bottom; }
  .t-default.t-cart .col-cart-num .qty-wrap a { height: 35px; line-height: 35px; width: 35px; }
  .t-default.t-cart .col-cart-num .qty-wrap a span { margin: 16px auto; }
  .t-default.t-cart .col-cart-sum { border-top: 1px solid #e1e1e1; width: 100%; }
  .t-default.t-cart .col-cart-op { right: 5px; top: 0px; padding: 0; }
  .t-default.t-track .col-track-img { width: 100px; }
  .t-default.t-iq .col-iq-date { width: 92px; }
  .t-default.t-iq .col-iq-num { padding-left: 100px; }
  .t-default.t-iq .col-iq-type { width: 100%; }
  .t-default.t-iq .col-iq-title { width: 100%; }
  .t-default.t-iq .col-iq-state { width: 100%; }
  .t-default.t-iq .col-iq-more { width: 100%; }
  .t-default.t-rp .btn-link-detail { padding: 0; }
  .t-default.t-rp .t-row { margin-bottom: 0; }
  .t-default.t-rp .t-row.nodata .col { border-bottom: 1px solid #e1e1e1; }
  .t-default.t-rp .t-head { display: none; }
  .t-default.t-rp .t-head .t-row .col { border-bottom: none; }
  .t-default.t-rp .col-rp-num { width: 100%; background: #999; color: #fff; }
  .t-default.t-rp .col-rp-date { width: 100%; }
  .t-default.t-rp .col-rp-pname { width: 100%; }
  .t-default.t-rp .col-rp-state { width: 100%; }
  .t-default.t-rp .fee { font-size: 1rem; margin: 0 20px; }
  .t-default.t-rp .fee .quote { padding: 20px 0; }
  .t-default.t-rp .fee .quote .state-select { padding-right: 220px; position: relative; }
  .t-default.t-rp .fee .quote .state-select .price strong { color: #45968f; }
  .t-default.t-rp .fee .quote .state-select .btns { position: absolute; top: 0; right: 0; }
  .t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree,
  .t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree { height: 30px !important; line-height: 30px !important; width: 100px; }
  .t-default.t-rp .fee .etc-fee { padding: 20px 0; }
  .t-default.t-rp .fee .detail-trigger { margin: 0; }
  .t-default.t-rtn > .t-body > .t-row > .col:nth-of-type(even) { border-left: none; }
  .t-default.t-rtn > .t-body > .t-row > .col:nth-of-type(2) { border-top: 1px solid #e1e1e1; }
  .t-default.t-rtn .col-rtn-num { width: 100%; display: block; }
  .t-default.t-rtn .col-rtn-item { width: 100%; display: block; }
  .t-default.t-rtn .col-rtn-price { width: 100%; display: block; }
  .t-default.t-rtn .col-rtn-desc { width: 100%; display: block; }
  .t-default.t-rtn .col-rtn-progress { width: 100%; display: block; }
  .t-default.t-rtn .col-rtn-state { width: 100%; display: block; }
  .t-default.t-rtncheck .col-rtncheck-op { width: 40px; }
  .t-default.t-rtncheck .t-body .t-row { padding-left: 40px; }
  .t-default.t-receiver .col-receiver-name .form-box .input-style{ width: calc(50% - 4px); }
  .t-default.t-receiver .col-receiver-name .form-box .form-gp{ position: relative; width: 100%;}
  .t-default.t-receiver .col-receiver-name .form-box .form-gp .radio-theme{ width: calc(100%/3); }
  .t-default.t-od .info-bottom .btns a,
  .t-default.t-od .info-bottom .btns a.gotopay { width: calc((100% / 2.1) - 10px); }
  .t-default.t-rtn .info-bottom .btns a,
  .t-default.t-rtn .info-bottom .btns a.gotopay {/* width: calc((100% / 2.1) - 10px); */  }
    .t-default.t-od .info-bottom .btns a:link{font-size: 14px;}

}
@media (max-width:499px) {
  .t-default.t-track .t-row { padding-left: 0; }
  .t-default.t-track .t-body .col { border-left: none; }
  .t-default.t-track .col-track-name { background: #f5f5f5; text-align: center; }
  .t-default.t-track .col-track-img { background: #f5f5f5; width: 100%; position: relative; top: auto; left: auto; margin: 0 auto; display: block; }
  .t-default.t-track .col-track-img a { max-width: 150px; }
  .t-default.t-receiver .col-receiver-tel { width: 100%; }
  .t-default.t-receiver .col-receiver-tel .input-style { width: 100%; display: block; }
  .t-default.t-receiver .col-receiver-tel .input-style:first-child { margin-right: 0; margin-bottom: 10px; }
  .t-default.t-rp .fee .quote .state-select { padding-right: 0; }
  .t-default.t-rp .fee .quote .state-select .btns { position: relative; top: auto; right: auto; display: block; text-align: center; }
  .t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-agree,
  .t-default.t-rp .fee .quote .state-select .btns .btn-theme.q-disagree { height: 40px !important; line-height: 40px !important; width: calc(50% - 10px); margin-bottom: 15px; display: inline-block; vertical-align: top; }
  .t-default.t-cart .t-body .t-row.t-row--add.t-row--gift .col-cart-name { line-height: 2}
  .t-default.t-cart .t-body .gift-table table td:last-child,
  .t-default.t-cart .t-body .gift-table table td { display: block; width: 100%; text-align: center }
  .t-default.t-cart .t-body .gift-table table .select-style { margin-bottom: 5px }
  .t-default.t-cart .t-body .gift-table table .btn-theme { margin: 0; }
  .t-default.t-cart .t-body .gift-table table .btn-theme.send { margin-right: 5px; }
}

/* order list */
#member .order-head { margin-bottom: 20px; padding-right: 370px; position: relative; }
#member .order-head .order-cate { position: absolute; top: -100px; right: 10px; width: 410px; font-size: 0; text-align: right; }
#member .order-head .order-cate a { display: inline-block; vertical-align: middle; width: 180px; height: 50px; line-height: 50px; text-align: center; font-size: 1.125rem; font-weight: 600; color: #666; background: #fff; border: 1px solid #666; }
#member .order-head .order-cate a:hover { color: #222; background: #f8f8f8; }
#member .order-head .order-cate a:last-child { margin-left: 10px; }
#member .order-head .order-cate a.current { background: #444; color: #fff; }
#member .order-head .order-state { max-width: 500px; margin: 0; padding-left: 90px; }
#member .order-head .order-state .label-style { text-align: left; width: 80px; }
@media(max-width:991px) {
  #member .order-head { padding-right: 340px; min-height: 45px; }
  #member .order-head .order-cate { width: 330px; top: 0; right: 0; }
  #member .order-head .order-cate a { width: 150px; height: 45px; line-height: 45px; }
}
@media(max-width:639px) {
  #member .order-head { padding: 0; margin: 0; margin-bottom: 20px; }
  #member .order-head .order-cate { width: 100%; position: relative; margin: 0 auto 20px auto; }
  #member .order-head .order-cate a { width: calc(50% - 6px); }
  #member .order-head .order-cate a.current { border-bottom: none; }
  #member .order-head .order-state { max-width: none; }
}
@media (max-width:499px) {
  #member .order-head .order-state { padding-left: 85px; }
  #member .order-head .order-state .label-style { position: absolute; line-height: 40px; top: 0; left: 0; width: 80px; }
}

/* CART */
#cart { margin-top: 50px; padding: 20px 0 40px 0; background: #f1f1f1; }
#cart .g-breadcrumb { margin: 20px auto; }
#cart .cart-head { padding-right: 420px; margin-bottom: 20px; }
#cart .cart-head .title { font-size: 1.875rem; line-height: 60px; }
#cart .cart-head .cart-cate { position: absolute; top: 0; right: 0; width: 410px; font-size: 0; }
#cart .cart-head .cart-cate a { display: inline-block; vertical-align: middle; width: 200px; height: 60px; line-height: 60px; text-align: center; font-size: 1.125rem; font-weight: 600; color: #666; }
#cart .cart-head .cart-cate a:hover { color: #222; }
#cart .cart-head .cart-cate a:last-child { margin-left: 10px; }
#cart .cart-head .cart-cate a.current { border-bottom: 1px solid #000; color: #000; }
#cart .cart-section { background: #fff; padding: 35px 35px; margin: 0 auto 40px auto; position: relative; }
#cart .cart-section+.notice-txt{ margin: -30px 0 30px; color: #F44336; line-height: 1.2;}
#cart .cart-section .form-mustfill { top: 35px; right: 35px; }
#cart .form-innersec { position: relative; margin: 20px auto; padding: 40px 0 25px 0; border-top: 1px solid #e1e1e1; }
#cart .form-innersec .form-mustfill { top: 30px; right: 0; }
#cart .form-cart-bottom { font-size: 0; padding-right: 320px; padding-top: 25px; margin: 0 auto 20px auto; padding: 40px 0 25px 0; border-top: 1px solid #e1e1e1; }
#cart .form-cart-bottom .use-coupon { font-size: 1rem; width: calc(100% - 320px); display: inline-block; position: relative; vertical-align: top; padding-right: 50px; color: #666; }
#cart .form-cart-bottom .use-coupon .form-box { padding-left: 135px; }
#cart .form-cart-bottom .use-coupon .select-style { max-width: 250px; color: #666; }
#cart .form-cart-bottom .use-coupon .label-style { width: 120px; padding-left: 40px; }
#cart .form-cart-bottom .use-coupon .label-style:before { content: ""; display: inline-block; position: absolute; top: 7px; left: 0; width: 32px; height: 30px; background: url(../images/icon_cart_usecoupon.png) no-repeat 0 0; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; }
#cart .form-cart-bottom .get-coupon { font-size: 1rem; width: calc(100% - 320px); display: inline-block; position: relative; vertical-align: top; padding-right: 50px; color: #666; padding: 10px 0; }
#cart .form-cart-bottom .get-coupon .form-box { padding-left: 160px; line-height: 1.5; }
#cart .form-cart-bottom .get-coupon .label-style { width: 150px; padding-left: 30px; line-height: 1.5; }
#cart .form-cart-bottom .get-coupon .label-style:before { content: ""; display: inline-block; position: absolute; top: -3px; left: 0; width: 20px; height: 25px; background: url(../images/icon_cart_getcoupon.png) no-repeat 0 0; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; }
#cart .form-cart-bottom .get-coupon .btn-select-etc { line-height: 1.5; color: #222; display: inline-block; vertical-align: top; position: relative; }
#cart .form-cart-bottom .get-coupon .btn-select-etc:hover { color: #666; }
#cart .form-cart-bottom .total-list { font-size: 1rem; width: 320px; display: inline-block; position: relative; vertical-align: top; }
#cart .form-cart-bottom .total-list .btn-wrap { margin-top: 30px; }
#cart .form-cart-bottom .total-list .btn-wrap .btn-theme { width: auto; }
#cart .form-cart-bottom .total-list ul li { display: block; position: relative; text-align: right; padding: 10px 0 10px 110px; }
#cart .form-cart-bottom .total-list ul li .title { text-transform: capitalize; width: 125px; position: absolute; top: 10px; left: 0; text-align: left; font-size: 1rem; color: #666; }
#cart .form-cart-bottom .total-list ul li.sum { border-top: 1px solid #ddd; padding-top: 30px; margin-top: 10px; font-size: 1.875rem; color: #45968f; font-weight: bold; }
#cart .form-cart-bottom .total-list ul li.sum .title { font-size: 1rem; color: #666; top: 30px; font-weight: normal; }
#cart .form-cart-bottom .total-list.summary ul li.sum { border-top: none; padding: 10px 0; margin: 0; }
#cart .form-cart-bottom .total-list.summary ul li.sum .title { top: 10px; }
#cart .cart-subhead--icon { position: relative; font-size: 1.65rem; text-align: left; line-height: 1.3; font-weight: 600; letter-spacing: 0.12rem; margin: 0 auto 20px auto; padding: 0 0 0 40px; font-family: inherit; }
#cart .cart-subhead--icon:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 32px; height: 30px; background-position: 0 0; background-repeat: no-repeat; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
#cart .cart-subhead--icon.c1:before { background-image: url(../images/icon_cart_ship.png); }
#cart .cart-subhead--icon.c2:before { background-image: url(../images/icon_cart_pay.png); }
#cart .cart-subhead--icon.c3:before { background-image: url(../images/icon_cart_info.png); }
#cart .cart-subhead--icon.c4:before { background-image: url(../images/icon_cart_wallet.png); }
#cart .form-box.p-l{ padding-left: 165px; }
#cart .btn-select-etc { font-size: 1rem; color: #666; line-height: 1.8; border-bottom: 1px solid #666666; }
#cart .btn-select-etc:hover { color: #333; bordre-bottom: 1px solid #333; }
#cart .form-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 15px 0; }
#cart .receiver-expend { margin: -20px 0 0 -5px; line-height: 1  }
#cart .term-box .form-box { margin-bottom: 5px; padding-left: 0; }
#cart .term-box .form-box .select-style { max-width: 250px; height: 40px; }
#cart .term-box a { color: #333;  display: inline-block;text-transform: capitalize;}
#cart .term-box a.red{color: #F44336;text-decoration: underline;}
#cart .term-box a:hover { color: #666; }
#cart .invc-expend { display: inline-block; margin-left: 10px; }
#cart .half-wrap { font-size: 0; }
#cart .half-wrap .left { font-size: 1rem; width: 50%; display: inline-block; position: relative; vertical-align: top; padding-right: 7%; }
#cart .half-wrap .right { font-size: 1rem; width: 50%; display: inline-block; position: relative; vertical-align: top; padding-right: 7%; }
#cart .finish-head { text-align: center; padding: 30px 0; margin: 0 auto 30px auto; border-bottom: 1px solid #ddd; }
#cart .finish-head .cart-finish-title { position: relative; font-size: 1.875rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.12rem; margin: 0 auto 20px auto; padding: 0 0 0 60px; text-align: center; display: inline-block; }
#cart .finish-head .cart-finish-title:before { content: ""; display: block; position: absolute; left: 0; top: 2px; width: 50px; height: 50px; background-image: url(../images/icon_cart_finish.png); background-position: 0 0; background-repeat: no-repeat; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
#cart .finish-head p span { display: inline-block; }
#cart .finish-head p a { color: inherit; border-bottom: 1px solid #222; display: inline-block; vertical-align: middle; margin: 0 0 0 5px; }
#cart .finish-head p a:hover { color: #000; border-bottom: 1px solid #000; }
#cart .finish-list > li { display: block; margin-bottom: 30px; padding-left: 160px; position: relative; }
#cart .finish-list > li .title { position: absolute; width: 160px; top: 0; left: 0; }
#cart .finish-btn-wrap { text-align: center; padding: 30px 0 0 0; margin: 30px auto 0 auto; border-top: 1px solid #ddd; }
@media(min-width:992px) and (max-width:1199px), (max-width:767px) {
  #cart .half-wrap .form-box.form-address .form-gp { padding-left: 0; }
  #cart .half-wrap .form-box.form-address .form-gp .select-area { width: 100%; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_tw .select-style,
  #cart .half-wrap .form-box.form-address .form-gp .address_area_foreign .select-style { font-size: 1rem; width: 100%; margin-right: 0; margin-bottom: 10px; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_tw .input-style,
  #cart .half-wrap .form-box.form-address .form-gp .address_area_foreign .input-style { font-size: 1rem; width: 100%; margin-right: 0; display: block; margin-bottom: 10px; }
}
@media(min-width:768px) and (max-width:991px), (min-width:1200px) {
  #cart .half-wrap .form-box.form-address .form-gp .select-area { width: 100%; margin-bottom: 10px; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_tw { margin: 0 -4px; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_tw .select-style { font-size: 1rem; width: calc(50% - 8px); margin: 0 4px 4px;  }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_tw .select-style.select-area{ width: calc(100% - 8px);margin-bottom: 4px }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_tw .input-style { font-size: 1rem; width: calc(50% - 8px);  margin: 0 4px; display: inline-block; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_tw .input-style:first-child{width: calc(100% - 8px);}
  #cart .half-wrap .form-box.form-address .form-gp .address_area_foreign .select-style { font-size: 1rem; width: calc((100% / 2) - 10px); margin-right: 0; margin-bottom: 10px; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_foreign .select-style:nth-of-type(2n+1) { margin-right: 10px; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_foreign .input-style { font-size: 1rem; width: calc(100% + 50%); margin-right: 0; }
  #cart .half-wrap .form-box.form-address .form-gp .address_area_foreign .input-style:nth-of-type(2n+1) { margin-left: calc(0px - (50% + 8px)); margin-top: 5px; }
}
@media(max-width: 1199px) {
 #cart .half-wrap .left { width: 100%; display: block; padding-right: 0; padding-top: 30px; }
  #cart .half-wrap .right { width: 100%; display: block; padding-right: 0; border-top: 1px solid #ddd; padding-top: 30px; margin-top: 30px; }
}
@media(max-width:991px) {
  #cart .cart-head { padding-right: 280px; }
  #cart .cart-head .title { font-size: 1.625rem; line-height: 40px; }
  #cart .cart-head .cart-cate { width: 270px; }
  #cart .cart-head .cart-cate a { width: 130px; height: 40px; }
}
@media(max-width:767px) {
  #cart { margin-top: 20px; }
  #cart .cart-subhead--icon { font-size: 1.375rem; }
  #cart .cart-subhead--icon:before { top: -1px; }
  #cart .cart-section .form-mustfill { top: 20px; right: 3px; }
  #cart .form-innersec { margin: 15px auto; padding: 15px 0; }
  #cart .invc-expend{ position: relative; top: auto; left: auto; margin-bottom: 20px; }
  #cart .cart-head .title { font-size: 1.4725rem; }
  #cart .cart-head .cart-cate { width: 270px; }
  #cart .cart-head .cart-cate a { width: 130px; height: 50px; }
  #cart .form-cart-bottom { padding-right: 0; }
  #cart .form-cart-bottom .use-coupon,
  #cart .form-cart-bottom .get-coupon { width: 100%; display: block; background: #f5f5f5; border-radius: 5px; padding: 10px; line-height: 40px; }
  #cart .form-cart-bottom .use-coupon .form-box,
  #cart .form-cart-bottom .get-coupon .form-box { margin-bottom: 0; }
  #cart .form-cart-bottom .use-coupon .form-box .label-style,
  #cart .form-cart-bottom .get-coupon .form-box .label-style { position: absolute; line-height: 40px; top: 0; left: 0; }
  #cart .form-cart-bottom .get-coupon .form-box .label-style { line-height: 1.5; }
  #cart .form-cart-bottom .total-list { width: 100%; display: block; }
  #cart .finish-head .cart-finish-title { font-size: 1.5rem; padding-left: 40px; letter-spacing: 0; }
  #cart .finish-head .cart-finish-title:before { width: 35px; height: 35px; top: -5px; }
  #cart .finish-list > li { margin-bottom: 20px; padding-left: 0; }
  #cart .finish-list > li .title { position: relative; width: auto; display: block; background: #f5f5f5; border-radius: 5px; font-weight: bold; padding: 10px; margin: 0 auto 15px auto; }
}
@media(max-width:599px) {
  #cart .cart-section { padding: 30px 20px; }
  #cart .cart-head { padding: 0; margin: 0; }
  #cart .cart-head .title { text-align: center; }
  #cart .cart-head .cart-cate { width: 100%; position: relative; margin: 0 auto; }
  #cart .cart-head .cart-cate a { line-height: 50px; width: calc(50% - 6px); background: #eee; color: #666; }
  #cart .cart-head .cart-cate a.current { background: #fff; }
}
@media(max-width:499px) {
  #cart .finish-head .cart-finish-title { font-size: 1.375rem; }
  #cart .form-box.p-l{ padding-left: unset; }
}
@media (max-width: 399px){
  #cart .form-cart-bottom .total-list .btn-wrap .btn-theme{ font-size: 12px; }
  #cart .form-cart-bottom .total-list .btn-wrap .btn-theme.send{ padding: 0 4px; }
}
.popup-select-list { list-style-type: none; margin: 0; padding: 0; }
.popup-select-list .box { background: #f8f8f8; border: 1px solid #eee; display: block; margin: 0 0 10px 0; padding: 10px; }
.popup-select-list .box .coupon-tag { background: #333; border-radius: 2px; color: #fff; font-size: 0.875rem; padding: 3px 20px; line-height: 1.5; font-style: normal; display: inline-block; }
.popup-select-list .box .info-detail { display: block; line-height: 1.5; color: #666; font-style: normal; margin-left: 23px; margin-top: -3px; font-size: 0.875rem; }
#popup-select-invc h4.title { margin-bottom: 0 }
#popup-select-invc .invc-wrap { position: relative }
#popup-select-invc .invc-wrap .form-notice.form-mustfill { position: relative; text-align: right; }

/* schedule */
.schedule { font-size: 1rem; padding: 7px 0; margin: 25px 40px 25px 20px; position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; }
.schedule .tipBtn { position: absolute; width: 20px; right: -25px; top: 7px; }
.schedule .tipBtn > a { position: relative; display: block; color: #333; font-size: 0.9375rem; line-height: 14px; }
.schedule .tipBtn .tipBox { position: absolute; font-size: 0.875rem; padding: 5px 10px; line-height: 1.5; white-space: nowrap; background: #333; color: #fff; right: -5px; top: -42px; display: none; }
.schedule .tipBtn .tipBox .time { display: none; }
.schedule .tipBtn .tipBox.is-open { display: block; }
.schedule .tipBtn .tipBox:before { content: ""; width: 0; height: 0; position: absolute; bottom: -6px; right: 12px; border-style: solid; border-width: 6px 5px 0 5px; border-color: #333 transparent transparent transparent; }
.schedule .tipBtn:hover .tipBox { display: block; }
.schedule .step { display: inline-block; position: relative; vertical-align: top; flex: 1 1 200px; padding: 0; text-align: center; }
.schedule .step:before { content: ""; display: block; position: absolute; height: 1px; left: 0; right: 0; top: 7px; z-index: 0; opacity: 0.4; background: url(../images/dashline.gif) repeat-x 0 0; }
.schedule .step:after { content: ""; top: 0; left: 50%; margin-left: -7px; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #bbb; z-index: 1; }
.schedule .step span { display: block; margin-top: 20px; line-height: 1.8; font-size: 0.9375rem; }
.schedule .step.is-done:before { opacity: 1; }
.schedule .step.is-done:after { background: #444; }
@media (max-width:1299px) {
  .schedule { padding: 5px 0; }
  .schedule .tipBtn { top: 3px; right: -30px; }
  .schedule .step:before { top: 5px; }
  .schedule .step:after { margin-left: -5px; width: 10px; height: 10px; }
  .schedule .step span { font-size: 0.75rem; }
}
@media (max-width:499px) {
  .schedule { margin: 15px 20px; padding-bottom: 80px; }
  .schedule .tipBtn { position: absolute; width: 100%; right: auto; top: auto; bottom: 0; }
  .schedule .tipBtn .far { display: none; }
  .schedule .tipBtn .tipBox { position: relative; text-align: center; display: block; background: none; top: 0; color: #333; }
  .schedule .tipBtn .tipBox .time { display: block; }
  .schedule .tipBtn .tipBox.is-open { display: block; }
  .schedule .tipBtn .tipBox:before { display: none; }
  .schedule .step span { display: none; }
}

/* 購物證明 */
#voucher { width: 780px; margin: 50px auto; padding: 20px; border: 1px solid #ddd; line-height: 1.7; }
#voucher .head { border-bottom: 1px dotted #ddd; text-align: center; }
#voucher .head img { max-width: 180px; }
#voucher .head .text { margin: 10px 0 20px; font-size: 14px; }
#voucher .list { border: 1px solid #ddd; padding: 10px; margin: 20px 0; }
#voucher .list p { margin: 0; }
#voucher .list .title { text-align: center; font-size: 24px; margin: 15px 0; }
#voucher .list .left { float: left; font-size: 14px; }
#voucher .list .right { float: right; font-size: 14px; }
#voucher .list .table { width: 100%; margin: 20px 0; }
#voucher .list .table td { border: 1px solid #ddd; padding: 10px 15px; text-align: center; vertical-align: middle; font-size: 14px; }
#voucher .list .table thead { background: #eee; }
#voucher .list .table tbody td { padding: 15px; }
#voucher .list .table tbody td:nth-child(1) { text-align: left; }
#voucher .list .table tbody td ul { margin-top: 10px; }
#voucher .list .table tbody td ul li { font-size: 12px; color: #999; }
#voucher .list .note { font-size: 13px; }
#voucher .print { border-top: 1px dotted #ddd; padding: 20px 0; }
#voucher .print a.btn-print { background: #aa8d48; display: block; width: 150px; text-align: center; color: #fff; font-size: 15px; margin: auto; padding: 7px; }
#voucher .print a.btn-print:hover { background: #866f39; }
#voucher .foot { background: #000; margin: 0 -20px -20px; text-align: center; color: #fff; font-size: 12px; padding: 5px; }

/* ====== magnific popup ====== */

/* member-nav-popup為專用樣式 */
.member-nav-popup.mfp-bg { opacity: 1; z-index: 1000; top: 50px; bottom: 0; }
.member-nav-popup.mfp-bg .mfp-wrap { position: fixed; top: 50px; left: 0; right: 0; bottom: auto; overflow: hidden; background-color: #fff; }
.member-nav-popup .mfp-content { max-width: none; height: calc(100vh - 50px); overflow: hidden auto; }
.member-nav-popup .mfp-container { opacity: 0; padding: 0; height: auto; width: auto; left: 0; right: 0; top: 50px; -moz-transition: -moz-transform 0.3s cubic-bezier(0.08, 0.81, 0.81, 0.96), opacity 0.3s; -o-transition: -o-transform 0.3s cubic-bezier(0.08, 0.81, 0.81, 0.96), opacity 0.3s; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.08, 0.81, 0.81, 0.96), opacity 0.3s; transition: transform 0.3s cubic-bezier(0.08, 0.81, 0.81, 0.96), opacity 0.3s; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); }
.member-nav-popup.mfp-ready .mfp-container { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.member-nav-popup.mfp-ready .mfp-container #member-nav { display: block !important; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.member-nav-popup.mfp-ready .mfp-container #member-nav > ul > li .title { font-size: 1.125rem; padding: 10px 25px 10px 13px; }
.member-nav-popup.mfp-ready .mfp-container #member-nav > ul > li > ul > li > a { font-size: 1.125rem; padding: 10px 25px 10px 13px; }
.member-nav-popup.mfp-ready .mfp-container #member-nav > ul > li > ul > li.current > a:after { top: 13px; }
.member-nav-popup.mfp-ready .mfp-container .member-nav-subhead a { border-radius: 0; }
.member-nav-popup.mfp-removing .mfp-container { opacity: 0; -moz-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); }
.member-nav-popup .mfp-close,
.member-nav-popup button.mfp-close { width: 60px; height: 60px; top: 0; right: 0; display: inline-block; opacity: 1; position: fixed; font-size: 0; background: none; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.member-nav-popup .mfp-close:before,
.member-nav-popup button.mfp-close:before,
.member-nav-popup .mfp-close:after,
.member-nav-popup button.mfp-close:after { content: ""; width: 30px; height: 2px; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -15px; background: #333; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.member-nav-popup .mfp-close:before,
.member-nav-popup button.mfp-close:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.member-nav-popup .mfp-close:after,
.member-nav-popup button.mfp-close:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.member-nav-popup .mfp-close:hover,
.member-nav-popup button.mfp-close:hover { background: #fff; }
.member-nav-popup .mfp-close:hover:before,
.member-nav-popup button.mfp-close:hover:before,
.member-nav-popup .mfp-close:hover:after,
.member-nav-popup button.mfp-close:hover:after { background: #666; }
@media (max-width:499px) {
  .member-nav-popup .mfp-container { opacity: 0; }
}

/* popup default effect */
.member-notice-popup.mfp-bg { opacity: 1; z-index: 1000; position: fixed; background-color: rgba(0, 0, 0, 0.3); }
.member-notice-popup .mfp-container { opacity: 0; -moz-transition: -moz-transform 0.4s, opacity 0.4s; -o-transition: -o-transform 0.4s, opacity 0.4s; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; -moz-transform: translate(0, 50px); -ms-transform: translate(0, 50px); -webkit-transform: translate(0, 50px); transform: translate(0, 50px); }
.member-notice-popup.mfp-ready .mfp-container { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.member-notice-popup.mfp-removing .mfp-container { opacity: 0; -moz-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); }
.member-notice-popup .mfp-close,
.member-notice-popup button.mfp-close { width: 50px; height: 50px; top: 0; right: 0; display: inline-block; opacity: 1; position: absolute; font-size: 0; background: none; border-radius: 8px; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.member-notice-popup .mfp-close:before,
.member-notice-popup button.mfp-close:before,
.member-notice-popup .mfp-close:after,
.member-notice-popup button.mfp-close:after { content: ""; width: 20px; height: 2px; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -10px; background: #333; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.member-notice-popup .mfp-close:before,
.member-notice-popup button.mfp-close:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.member-notice-popup .mfp-close:after,
.member-notice-popup button.mfp-close:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.member-notice-popup .mfp-close:hover,
.member-notice-popup button.mfp-close:hover { background: none; }
.member-notice-popup .mfp-close:hover:before,
.member-notice-popup button.mfp-close:hover:before,
.member-notice-popup .mfp-close:hover:after,
.member-notice-popup button.mfp-close:hover:after { background: #666; }
.popup-theme { padding: 30px 25px; background: #fff; border-radius: 10px; position: relative; border: 5px solid #ccc; max-width: 530px; width: 100%; margin: 0 auto; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.popup-theme .title { text-align: center; margin: 0 auto 20px auto; padding: 0; font-size: 1.25rem; }
.popup-theme .repair-types { font-size: 0; display: block; margin: 0 auto 20px; }
.popup-theme .repair-types .type1,
.popup-theme .repair-types .type2 { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #999; background-color: transparent; color: #333; overflow: hidden; border-radius: 5px; display: block; margin: 0 auto 10px auto; padding: 30px 15px; line-height: 1; height: auto; font-weight: normal; font-size: 1.125rem; }
.popup-theme .repair-types .type1:before,
.popup-theme .repair-types .type2:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.popup-theme .repair-types .type1:link,
.popup-theme .repair-types .type2:link { color: #333; }
.popup-theme .repair-types .type1:link:hover,
.popup-theme .repair-types .type2:link:hover { color: #fff; }
.popup-theme .repair-types .type1:hover,
.popup-theme .repair-types .type2:hover { color: #fff; background: #666; border-color: #666; }
.popup-theme .repair-types .type1:hover:before,
.popup-theme .repair-types .type2:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.popup-theme .repair-types .type1 span,
.popup-theme .repair-types .type2 span { display: inline-block; width: auto; position: relative; padding-left: 50px; }
.popup-theme .repair-types .type1 span:before,
.popup-theme .repair-types .type2 span:before { content: ""; display: block; position: absolute; left: 0; top: -10px; width: 41px; height: 41px; border-radius: 50%; background-color: #fff; border: 3px solid #fff; background-image: url(../images/icon_member_func.png); background-repeat: no-repeat; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
.popup-theme .repair-types .type1 span:before { background-position: 0 -35px; }
.popup-theme .repair-types .type2 span:before { background-position: 0 -140px; }
.popup-theme .btn-theme { position: relative; display: inline-block; vertical-align: middle; height: 45px; font-size: 1rem; line-height: 45px; text-align: center; white-space: nowrap; margin: 0; padding: 0 10px; border-style: solid; border-width: 1px; font-weight: 600; -moz-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; -webkit-transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; transition: background 0.2s ease, color 0.2s ease, border 0.2s ease; border-color: #aaa; background-color: transparent; color: #999; overflow: hidden; width: 140px; border-radius: 3px; height: 40px; line-height: 40px; }
.popup-theme .btn-theme:before { content: ""; position: absolute; top: -5px; bottom: -5px; width: 100%; display: block; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); -moz-transform: scaleX(0) translate(0, 0); -ms-transform: scaleX(0) translate(0, 0); -webkit-transform: scaleX(0) translate(0, 0); transform: scaleX(0) translate(0, 0); }
.popup-theme .btn-theme:link { color: #999; }
.popup-theme .btn-theme:link:hover { color: #fff; }
.popup-theme .btn-theme:hover { color: #fff; background: #aaa; border-color: #aaa; }
.popup-theme .btn-theme:hover:before { -moz-animation: ani_btn_hover 0.4s linear; -webkit-animation: ani_btn_hover 0.4s linear; animation: ani_btn_hover 0.4s linear; }
.popup-term { max-width: 800px !important; }
#member-right #select-repair { margin-bottom: 50px; }
@media (max-width:767px) {
  #select-repair .title { display: none; }
}

/* === theme === */
.theme-paragraph { margin: 0 auto 15px auto; }
.theme-stit { display: block; margin: 10px auto 5px auto; font-weight: 600; line-height: 1.5; font-size: 1.125rem; }
.theme-list-nopadding { font-size: 1rem; list-style: none; margin: 0 0 30px 0; padding: 0; }
.theme-list-nopadding li { display: block; }
.theme-hr { margin: 30px auto; height: 1px; width: 100%; display: block; border: none; background: #eee; }

/* 選擇報修提醒 */
.theme-notice-box { margin: 20px auto 0 auto; font-size: 0.9375rem; line-height: 1.5; border: none; color: #666; background: #f8f8f8; border: 1px solid #eee; border-radius: 5px; padding: 10px; }

/* 樣板 */
.index-edit-pic-group .left-box,
.index-edit-pic-group .right-box,
.index-edit-pic-group .top-box,
.index-edit-pic-group .bot-box { display: inline-block; vertical-align: top; width: 100%; }
.index-edit-pic-group .left-box,
.index-edit-pic-group .right-box { width: calc(50% - 44px); margin: 20px }
.index-edit-pic-group .top-box { margin-bottom: 6%; }
.index-edit-pic-group img { width: 100%; max-width: 100%; height: auto !important; }
.index-edit-pic-group iframe { width: 100%; max-width: 100% !important; }
@media only screen and (max-width:991px) {
  .index-edit-pic-group .left-box,
  .index-edit-pic-group .right-box { width: calc(50% - 22px); margin: 10px }
}
@media only screen and (max-width:640px) {
  .index-edit-pic-group .left-box,
  .index-edit-pic-group .right-box { width: calc(50% - 12px); margin: 5px }
}
@media only screen and (max-width:480px) {
  .index-edit-pic-group .left-box,
  .index-edit-pic-group .right-box { width: 100%; margin: 5px 0 }
  .index-edit-pic-group .top-box { margin-bottom: 10px; }
}

/* ====== keyframe ====== */
@-webkit-keyframes ani_btn_hover {
  0% { opacity: 0; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -moz-transform: scaleX(0) translate(-50%, 0); -ms-transform: scaleX(0) translate(-50%, 0); -webkit-transform: scaleX(0) translate(-50%, 0); transform: scaleX(0) translate(-50%, 0); }
  50% { opacity: 1; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -moz-transform: scaleX(1) translate(0, 0); -ms-transform: scaleX(1) translate(0, 0); -webkit-transform: scaleX(1) translate(0, 0); transform: scaleX(1) translate(0, 0); }
  100% { opacity: 0; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -moz-transform: scaleX(1) translate(100%, 0); -ms-transform: scaleX(1) translate(100%, 0); -webkit-transform: scaleX(1) translate(100%, 0); transform: scaleX(1) translate(100%, 0); }
}
@-moz-keyframes ani_btn_hover {
  0% { opacity: 0; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -moz-transform: scaleX(0) translate(-50%, 0); -ms-transform: scaleX(0) translate(-50%, 0); -webkit-transform: scaleX(0) translate(-50%, 0); transform: scaleX(0) translate(-50%, 0); }
  50% { opacity: 1; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -moz-transform: scaleX(1) translate(0, 0); -ms-transform: scaleX(1) translate(0, 0); -webkit-transform: scaleX(1) translate(0, 0); transform: scaleX(1) translate(0, 0); }
  100% { opacity: 0; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -moz-transform: scaleX(1) translate(100%, 0); -ms-transform: scaleX(1) translate(100%, 0); -webkit-transform: scaleX(1) translate(100%, 0); transform: scaleX(1) translate(100%, 0); }
}
@keyframes ani_btn_hover {
  0% { opacity: 0; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -moz-transform: scaleX(0) translate(-50%, 0); -ms-transform: scaleX(0) translate(-50%, 0); -webkit-transform: scaleX(0) translate(-50%, 0); transform: scaleX(0) translate(-50%, 0); }
  50% { opacity: 1; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -moz-transform: scaleX(1) translate(0, 0); -ms-transform: scaleX(1) translate(0, 0); -webkit-transform: scaleX(1) translate(0, 0); transform: scaleX(1) translate(0, 0); }
  100% { opacity: 0; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -moz-transform: scaleX(1) translate(100%, 0); -ms-transform: scaleX(1) translate(100%, 0); -webkit-transform: scaleX(1) translate(100%, 0); transform: scaleX(1) translate(100%, 0); }
}
@-webkit-keyframes ani_welcome_shake {
  0%,
  6%,
  12%,
  18%,
  100% { -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); }
  3%,
  9%,
  15% { -moz-transform: scale(1.01) rotate(5deg); -ms-transform: scale(1.01) rotate(5deg); -webkit-transform: scale(1.01) rotate(5deg); transform: scale(1.01) rotate(5deg); }
}
@-moz-keyframes ani_welcome_shake {
  0%,
  6%,
  12%,
  18%,
  100% { -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); }
  3%,
  9%,
  15% { -moz-transform: scale(1.01) rotate(5deg); -ms-transform: scale(1.01) rotate(5deg); -webkit-transform: scale(1.01) rotate(5deg); transform: scale(1.01) rotate(5deg); }
}
@keyframes ani_welcome_shake {
  0%,
  6%,
  12%,
  18%,
  100% { -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); }
  3%,
  9%,
  15% { -moz-transform: scale(1.01) rotate(5deg); -ms-transform: scale(1.01) rotate(5deg); -webkit-transform: scale(1.01) rotate(5deg); transform: scale(1.01) rotate(5deg); }
}
@-webkit-keyframes ani_fadeInUp {
  0% { opacity: 0; -moz-transform: translate(0, 10px); -ms-transform: translate(0, 10px); -webkit-transform: translate(0, 10px); transform: translate(0, 10px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-moz-keyframes ani_fadeInUp {
  0% { opacity: 0; -moz-transform: translate(0, 10px); -ms-transform: translate(0, 10px); -webkit-transform: translate(0, 10px); transform: translate(0, 10px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes ani_fadeInUp {
  0% { opacity: 0; -moz-transform: translate(0, 10px); -ms-transform: translate(0, 10px); -webkit-transform: translate(0, 10px); transform: translate(0, 10px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes ani_jump {
  0%,
  100% { margin-top: 0; }
  50% { margin-top: -10px; }
}
@-moz-keyframes ani_jump {
  0%,
  100% { margin-top: 0; }
  50% { margin-top: -10px; }
}
@keyframes ani_jump {
  0%,
  100% { margin-top: 0; }
  50% { margin-top: -10px; }
}
.tappay-field-focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
.tpfield { height: 40px; width: 300px; border: 1px solid gray; margin: 5px 0; padding: 5px; }

/* 20200102 */

/* 購物車組合商品 */

.t-default.t-cart .t-body .gift-table .select-style { min-width: 120px; }
.t-default.t-cart .t-body .gift-table .qty-wrap { margin: 0 auto; }
@media only screen and (max-width:1366px) {
 .t-default.t-cart .t-body .btn-gift-modify { width: 35px; }
  .t-default.t-cart .t-body .btn-gift-modify:before { content: '\f044'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
  .t-default.t-cart .t-body .btn-gift-modify.open:before { content: '\f00d'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
  .t-default.t-cart .t-body .btn-gift-modify.add:before { content: '\f044'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
  .t-default.t-cart .t-body .btn-gift-modify.add.open:before { content: '\f00d'; display: inline-block; }
  .t-default.t-cart .t-body .btn-gift-modify.add-good:before { content: '\f044'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
  .t-default.t-cart .t-body .btn-gift-modify.add-good.open:before { content: '\f00d'; display: inline-block; }
}
@media only screen and (max-width:991px) {
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-price { width: 100%; }
  .t-default.t-cart .t-body .t-row.t-row--add .col-cart-sum { width: 100% }
}
@media only screen and (max-width:767px) {
  .qty-wrap.center { margin: 0 auto; display: block; }
}
@media only screen and (max-width:640px) {
  .t-default.t-cart .t-body .gift-table .select-style { min-width: 200px; }
  .t-default.t-cart .t-body .btn-gift-modify,
  .t-default.t-cart .t-body .btn-gift-modify.add,
  .t-default.t-cart .t-body .btn-gift-modify.add-good{ display: block; border-radius: 22px; height: 22px; width: 22px; line-height: 22px; text-align: center; padding: 0; background: #888; margin: 0}
  .t-default.t-cart .t-body .btn-gift-modify.add:before,
  .t-default.t-cart .t-body .btn-gift-modify.add-good:before{ font-size: 0.7rem; }
  .t-default.t-cart .t-body .btn-gift-modify{margin: 5px 0 0 0}
}
.tpfield { background: #fff; padding: 0 10px; height: 45px; width: 100%; display: block; outline: none; border-radius: 0; border: 1px solid #ddd; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-transition: border 0.15s; -o-transition: border 0.15s; -webkit-transition: border 0.15s; transition: border 0.15s; font-size: 1rem; }
#wh-widget-send-button,
#wh-widget-send-button iframe { z-index: 0 !important }
#wh-widget-send-button.wh-widget-right { z-index: 1 !important; }
#feature { padding-top: 80px; }
#stripe-payview { margin: 0 auto }
#stripe-payview #card-element { width: calc(50% - 27px); padding: 0 10px; display: inline-block; border: 1px solid #ddd; }
#stripe-payview #card-element input { border: 1px solid #ddd !important; }
#card-button { display: block; margin: 20px auto; background: #000; color: #fff; border-radius: 0; opacity: 1 !important }
@media only screen and (max-width:767px) {
  #stripe-payview #card-element { width: calc(100%); }
}