@charset "UTF-8";
*:focus { outline: none; }

article, section, aside, div, ul, ol, li, menu, p, a, nav, link, form, input, textarea, button, select, option, label, img, map, area, picture, svg, audio, video, table, caption, th, tr, td, thead, tbody, tfoot, address, figure { margin: 0; padding: 0; line-height: 1; }

html { font-size: 16px; }

body { width: 100%; margin: 0; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; }

main { display: block; }

address { font-style: inherit; }

li { list-style-type: none; }

picture { display: block; }

img { width: 100%; max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 { -webkit-margin-before: 0; -webkit-margin-after: 0; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }

a { text-decoration: none; color: inherit; display: block; }

a:focus { outline: none; }

p { -webkit-margin-before: 0; -webkit-margin-after: 0; }

p:focus { outline: none; }

input { -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; -webkit-appearance: none; }

input[type='number'] { -moz-appearance: textfield; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }

textarea { -webkit-box-sizing: border-box; box-sizing: border-box; resize: none; }

input:focus, select:focus, textarea:focus, button:focus { outline: none; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/*font-size */
/*font-size */
/*font-weight */
/*font-weight */
/*transiton */
/*transiton */
/*keyframe */
/*keyframe */
@font-face { font-family: 'icomoon'; src: url("../../assets/font/allicon/icomoon.eot?4m2zr8"); src: url("../../assets/font/allicon/icomoon.eot?4m2zr8#iefix") format("embedded-opentype"), url("../../assets/font/allicon/icomoon.ttf?4m2zr8") format("truetype"), url("../../assets/font/allicon/icomoon.woff?4m2zr8") format("woff"), url("../../assets/font/allicon/icomoon.svg?4m2zr8#icomoon") format("svg"); font-weight: normal; font-style: normal; }

[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-logo01:before { content: "\e924"; }

.icon-heart:before { content: "\e922"; }

.icon-heart1:before { content: "\e923"; }

.icon-download-01:before { content: "\e91d"; }

.icon-people:before { content: "\e921"; }

.icon-rotate:before { content: "\e91e"; }

.icon-upLevel:before { content: "\e91f"; }

.icon-downLevel:before { content: "\e920"; }

.icon-pencil:before { content: "\e91a"; }

.icon-image:before { content: "\e91c"; }

.icon-youtube:before { content: "\e905"; }

.icon-twitter:before { content: "\e906"; }

.icon-facebook:before { content: "\e907"; }

.icon-information:before { content: "\e919"; }

.icon-volume:before { content: "\e917"; }

.icon-dollar:before { content: "\e918"; }

.icon-ChrisClose:before { content: "\e916"; }

.icon-ChrisCross:before { content: "\e914"; }

.icon-circles:before { content: "\e915"; }

.icon-eye-view:before { content: "\e913"; }

.icon-check-symbol:before { content: "\e90f"; }

.icon-eye:before { content: "\e910"; }

.icon-cancel:before { content: "\e90e"; }

.icon-help:before { content: "\e925"; }

.icon-camera:before { content: "\e91b"; }

.icon-triangle-up:before { content: "\e911"; }

.icon-triangle-down:before { content: "\e912"; }

.icon-drum:before { content: "\e90c"; }

.icon-drumG:before { content: "\e90d"; }

.icon-finger:before { content: "\e90a"; color: #4d4d4d; }

.icon-envelop:before { content: "\e90b"; color: #4d4d4d; }

.icon-google:before { content: "\e904"; }

.icon-network:before { content: "\e903"; }

.icon-shopping-cart:before { content: "\e902"; }

.icon-search:before { content: "\e901"; }

.icon-keyboard_arrow_right:before { content: "\e909"; }

.icon-keyboard_arrow_left:before { content: "\e908"; }

.icon-person_outline:before { content: "\e900"; }

/*================================================================================================================ */

body { font-family: 'SegoeUIRegular', '微軟正黑體'; overflow-x: hidden; }

main { overflow: hidden; }

.hide_lightbox { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 2; }

.hide_lightbox .for_scroll { height: 100%; position: relative; }

.hide_lightbox .ajax_close { width: 20px; height: 15px; display: block; position: relative; }

.xBox { letter-spacing: 1px; }

.xBox .title { font-family: 'YesevaOneRegular', '微軟正黑體'; line-height: 1.4; }

.xBox .subTitle { line-height: 1.6; }

.btnSec { cursor: pointer; width: 60px; height: 60px; border: solid 2px #000; border-radius: 50%; position: relative; background-color: #ffefa5; -webkit-transition: all 0s ease 0.4s; -moz-transition: all 0s ease 0.4s; -ms-transition: all 0s ease 0.4s; -o-transition: all 0s ease 0.4s; transition: all 0s ease 0.4s; }

.btnSec:after { content: ''; display: block; background-color: #fff; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; z-index: 0; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.btnSec .cross { display: block; position: relative; z-index: 1; width: 100%; height: 100%; }

.btnSec .cross:before, .btnSec .cross:after { content: ''; display: block; background-color: #000; width: 2px; height: 24px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.btnSec .cross:after { -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); }

@media (max-width: 600px) { .btnSec { width: 40px; height: 40px; } }

.btnSec:hover { border-color: #ffefa5; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }

.btnSec:hover:after { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

.socialLink { color: #484848; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.socialLink .list { margin-right: 20px; }

.socialLink .list:last-child { margin-right: 0; }

.socialLink .link { padding: 9px; }

.socialLink .notShow { display: none; }

.icon-person_outline { font-size: 20px; font-size: 1.25rem; }

.uploadBox { position: relative; }

.uploadBtn { cursor: pointer; background-color: #e7e7e7; font-size: 12px; font-size: 0.75rem; font-weight: 900; -webkit-box-sizing: border-box; box-sizing: border-box; width: 150px; padding: 16px 25px; text-align: center; display: inline-block; }

.uploadInput { opacity: 0; height: 0; width: 0; position: absolute; left: 0; top: 0; z-index: -1; }

.backward { border-radius: 50%; border: solid 2px #000; width: 46px; height: 46px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.djLogo .link { display: inline-block; }

.djLogo .icon { font-size: 90px; font-size: 5.625rem; }

.chrisSelect { position: relative; }

.chrisSelect .dropShow { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.chrisSelect .dropShow .icon { display: block; margin-left: auto; }

.chrisSelect .dropList { display: none; width: 100%; position: absolute; left: 0; top: 100%; border: solid 1px #000; background-color: #fff; }

.chrisSelect .dropList .list { cursor: pointer; padding: 10px; border-bottom: solid 1px #000; }

.chrisSelect .dropList .list:hover { background-color: #f3f3f3; }

.chrisSelect .dropList .list:last-child { border-bottom: none; }

.chrisSelect .dropList .character { width: auto; }

.btnHover { letter-spacing: 0.5px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.btnHover:hover { letter-spacing: 1.5px; }

.btnBtoW { color: #000; background-color: #fff; -webkit-transition: color .7s ease 0s, background-color .7s ease 0s; -o-transition: color .7s ease 0s, background-color .7s ease 0s; transition: color .7s ease 0s, background-color .7s ease 0s; }

.btnBtoW:hover { color: #fff; background-color: #000; }

/* chrisRadio */
.chrisRadio { display: block; position: relative; padding-left: 20px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Hide the browser's default radio button */
.chrisRadio input { position: absolute; opacity: 0; cursor: pointer; }

/* Create a custom radio button */
.checkmark { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 10px; width: 10px; background-color: #c8c8c8; border-radius: 50%; }

/* On mouse-over, add a grey background color */
.chrisRadio:hover input ~ .checkmark { background-color: #ccc; }

/* When the radio button is checked, add a blue background */
.chrisRadio input:checked ~ .checkmark { background-color: #333; }

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none; }

/* Show the indicator (dot/circle) when checked */
.chrisRadio input:checked ~ .checkmark:after { display: block; }

/* Style the indicator (dot/circle) */
.chrisRadio .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }

.slick-dots li.slick-active button:before, .slick-dots li.slick-active button:hover:before { opacity: 1; }

.slick-dots li button:hover:before { opacity: .25; }

.backToTopBtn { cursor: pointer; border-radius: 50%; border: solid 2px #000; width: 30px; height: 30px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.backToTopBtn.show { -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }

.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking { background-color: inherit; }

/*clearfix */
.clearfix:after { content: ""; display: block; clear: both; }

/*clearfix */
/*width */
.w_50 { width: 50%; }

.w_100 { width: 100%; }

/*width */
/*padding-left */
.p_l_20px { padding: 0 0 0 20px; }

.p_l_3vw { padding: 0 0 0 3vw; }

/*padding-left */
/*padding-right */
.p_r_20px { padding: 0 20px 0 0; }

.p_r_3vw { padding: 0 3vw 0 0; }

/*padding-right */
/*border */
.border-R { border-right: solid 1px #333333; -webkit-box-sizing: border-box; box-sizing: border-box; }

.border-L { border-left: solid 1px #333333; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* */
/* */
.winnieBtnType { font-family: 'SegoeUIRegular', '微軟正黑體'; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; }

.winnieBtnType.two .winnieBtn { width: 50%; }

.winnieBtnType.three .winnieBtn { width: 33.33%; }

.winnieBtnType button { font-family: 'SegoeUIRegular', '微軟正黑體'; }

.winnieBtnType .winnieBtn { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: 0.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.winnieBtnType .typeA { color: #fff; border: solid 1px #fff0ab; }

.winnieBtnType .typeB { color: #000; border: solid 1px #fff0ab; background-color: #fff0ab; }

.winnieBtnType .typeC { color: #fff; border: solid 1px #000; background-color: #000; }

.winnieBtnType .typeD { color: #000; border: solid 1px #000; }

.winnieBtnType .typeE { color: #fff; border: solid 1px #232323; background-color: #232323; }

/* */
header { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 0; display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; left: 0; top: 0; z-index: 3; }

header.noSee { opacity: 0; }

header.white .headerLogo { color: #000; background-color: #fff; }

header.white .headerMixBtn { color: #fff; }

header.white .headerMixBtn .list:after { background-color: #fff; }

header.white .headerMenu { color: #fff; }

header.white .headerMenu .humburger .line { background-color: #fff; }

header.black .headerLogo { color: #fff; background-color: #000; }

header.black .headerMixBtn { color: #000; }

header.black .headerMixBtn .list:after { background-color: #000; }

header.black .headerMenu { color: #000; }

header.black .headerMenu .humburger .line { background-color: #000; }

header .list:last-child:after { display: none; }

header.goHide { opacity: 0; visibility: hidden; }

@media (max-width: 767px) { header { width: 0; height: 0; position: relative; }
  header.spMode { width: auto; position: fixed; z-index: 4; }
  header.spMode .headerLogo { position: relative; width: 80px; height: 80px; }
  header.spMode .headerLogo .icon { font-size: 50px; font-size: 3.125rem; }
  header.spMode .headerMenu { color: #fff !important; background-color: #1a1a1a; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; left: 0; right: auto; top: 0; z-index: 2; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); width: 80px; height: 80px; padding: 0; opacity: 1; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }
  header.spMode .headerMenu .text { margin: 0; }
  header.spMode .headerMenu .humburger { margin-bottom: 10px; } }

.headerLogo { color: #fff; background-color: #000; letter-spacing: 1px; width: 160px; height: 160px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 3vw; top: 3vw; min-width: 70px; min-height: 70px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

.headerLogo.show { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.headerLogo.small { width: 90px; height: 90px; }

.headerLogo.small .icon { font-size: 50px; font-size: 3.125rem; }

.headerLogo .bText { width: 0; height: 0; opacity: 0; }

.headerLogo .icon { font-size: 90px; font-size: 5.625rem; }

@media (max-width: 767px) { .headerLogo { position: fixed; left: 0; top: 0; z-index: 1; width: 90px; height: 90px; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
  .headerLogo.small { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); width: 80px; height: 80px; min-width: 1px; min-height: 1px; }
  .headerLogo .title { font-size: 44px; font-size: 2.75rem; }
  .headerLogo .text { font-size: 12px; font-size: 0.75rem; } }

.headerMenu { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: absolute; top: 3vw; right: 6.25vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; opacity: 0; }

.headerMenu.show { opacity: 1; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; -ms-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; }

.headerMenu .text { font-size: 12px; font-size: 0.75rem; font-weight: 900; letter-spacing: 1px; margin-right: 28px; }

.headerMenu .humburger { height: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.headerMenu .humburger .line { background-color: #000; width: 2px; height: 15px; margin-right: 10px; display: block; }

.headerMenu .humburger .line.mid { -webkit-animation-delay: 0.33s; animation-delay: 0.33s; }

.headerMenu .humburger .line.lar { -webkit-animation-delay: 0.66s; animation-delay: 0.66s; }

.headerMenu .humburger .line:last-child { margin-right: 0; }

@media (max-width: 767px) { .headerMenu .humburger .line { background-color: #fff !important; } }

.sp_menu_anim { -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; -webkit-animation: equalizer 1600ms infinite; animation: equalizer 1600ms infinite; }

.headerMixBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 4vw; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; }

.headerMixBtn.show { opacity: 1; -webkit-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; }

.headerMixBtn .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.headerMixBtn .list .link { padding: 0 24px; -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; position: relative; text-align: center; }

.headerMixBtn .list .link .number { color: #fff; background-color: #c1c1bf; border-radius: 50%; min-width: 20px; min-height: 20px; max-width: 24px; max-height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 50%; top: -25px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; }

.headerMixBtn .list .link .number .i { font-size: 12px; font-size: 0.75rem; -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); }

.headerMixBtn .list:after { content: ''; display: block; background-color: #000; width: 1px; height: 10px; }

.headerMixBtn .list:hover .number { background-color: #000; }

.headerMixBtn .list:hover .link { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

@media (max-width: 767px) { .headerMixBtn { display: none; } }

@-webkit-keyframes equalizer { 0% { height: 15px; }
  10% { height: 18px; }
  20% { height: 21px; }
  30% { height: 24px; }
  40% { height: 27px; }
  50% { height: 30px; }
  60% { height: 27px; }
  70% { height: 24px; }
  80% { height: 21px; }
  90% { height: 18px; }
  100% { height: 15px; } }

@keyframes equalizer { 0% { height: 15px; }
  10% { height: 18px; }
  20% { height: 21px; }
  30% { height: 24px; }
  40% { height: 27px; }
  50% { height: 30px; }
  60% { height: 27px; }
  70% { height: 24px; }
  80% { height: 21px; }
  90% { height: 18px; }
  100% { height: 15px; } }

footer { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0 auto; padding: 0 6%; overflow: hidden; }

footer.white { color: #fff; }

footer.white .socialLink { color: #fff; }

footer .allFeatures { color: #fff; background-color: #434343; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; }

footer .allFeatures.show .seriesLink:after { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition: all 1s ease 0.4s; -moz-transition: all 1s ease 0.4s; -ms-transition: all 1s ease 0.4s; -o-transition: all 1s ease 0.4s; transition: all 1s ease 0.4s; }

footer .allFeatures.show .webLink:after { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition: all 1s ease 0.8s; -moz-transition: all 1s ease 0.8s; -ms-transition: all 1s ease 0.8s; -o-transition: all 1s ease 0.8s; transition: all 1s ease 0.8s; }

footer .allFeatures.show .sBtn:after { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition: all 2s ease 0s; -moz-transition: all 2s ease 0s; -ms-transition: all 2s ease 0s; -o-transition: all 2s ease 0s; transition: all 2s ease 0s; }

footer .sBtn { -webkit-box-sizing: border-box; box-sizing: border-box; width: 13vw; height: 13vw; position: relative; overflow: hidden; }

footer .sBtn:after { content: ''; display: block; background-color: #484848; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

footer .sBtn.custom { border-right: solid 1px #565656; }

footer .sBtn.custom .link:after { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }

footer .sBtn.contact { border-left: solid 1px #565656; }

footer .sBtn.contact .link:after { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }

footer .sBtn:hover .link:after { border-radius: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

footer .sBtn:hover .icon { -webkit-animation: flogo 1600ms infinite; animation: flogo 1600ms infinite; }

footer .sBtn .icon { margin-bottom: 20px; }

footer .sBtn .icon.icon-finger { font-size: 50px; font-size: 3.125rem; }

footer .sBtn .icon.icon-envelop { font-size: 25px; font-size: 1.5625rem; }

footer .sBtn .icon:before { color: #fff; }

footer .sBtn .link { letter-spacing: 1px; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; overflow: hidden; }

footer .sBtn .link:after { content: ''; display: block; position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

footer .sBtn .link .text { font-size: 12px; font-size: 0.75rem; }

footer .allLinkSec { letter-spacing: 1px; width: 72%; padding: 0 4vw; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

footer .allLinkSec .secBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

footer .allLinkSec .seriesLink { font-size: 20px; font-size: 1.25rem; margin: 0 0 20px 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; overflow: hidden; }

footer .allLinkSec .seriesLink:after { content: ''; display: block; background-color: #484848; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

footer .allLinkSec .seriesLink .link { padding: 0 10px; margin-right: 16px; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

footer .allLinkSec .seriesLink .link:hover { color: #ffefa5; }

footer .allLinkSec .seriesLink .link:last-child { margin-right: 0; }

footer .allLinkSec .seriesLink .link .text { line-height: 1.6; }

footer .allLinkSec .webLink { color: #999; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; overflow: hidden; }

footer .allLinkSec .webLink:after { content: ''; display: block; background-color: #484848; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

footer .allLinkSec .webLink .link { padding: 0 5px; margin-right: 10px; position: relative; overflow: hidden; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

footer .allLinkSec .webLink .link:hover { color: #ffefa5; }

footer .allLinkSec .webLink .link:last-child { margin-right: 0; }

footer .allLinkSec .webLink .link .text { line-height: 1.6; }

@media (max-width: 1366px) { footer .allLinkSec { width: 52vw; padding: 10px 4vw; }
  footer .sBtn { width: 18vw; height: 18vw; } }

@media (max-width: 1024px) { footer .allFeatures { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  footer .sBtn { width: 50%; height: 150px; padding: 0; border-bottom: solid 2px #565656; }
  footer .sBtn.custom { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
  footer .sBtn.contact { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  footer .allLinkSec { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; padding: 40px 4vw; } }

@media (max-width: 767px) { footer .allLinkSec { display: none; }
  footer .icon.icon-envelop { margin-bottom: 30px; }
  footer .sBtn { height: 150px; padding: 0; }
  footer .sBtn .link { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } }

footer .allMiscellaneous { padding: 100px 6vw 0 6vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

footer .allMiscellaneous.show .footerContact { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

footer .allMiscellaneous.show .socialLink, footer .allMiscellaneous.show .netLink { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease 0.6s; -moz-transition: all 1s ease 0.6s; -ms-transition: all 1s ease 0.6s; -o-transition: all 1s ease 0.6s; transition: all 1s ease 0.6s; }

footer .socialLink { margin-bottom: 40px; opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }

footer .socialLink .list { width: 35px; height: 35px; position: relative; }

footer .socialLink .list:hover:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

footer .socialLink .list:after { content: ''; display: block; background-color: #ffefa5; border-radius: 50%; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

footer .socialLink .list.facebook:hover { color: #3b559f; }

footer .socialLink .list.twitter:hover { color: #4ba1be; }

footer .socialLink .list.youtube:hover { color: #ff0000; }

footer .socialLink .list.google:hover { color: #dc4a3d; }

footer .netLink { margin-bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }

footer .netLink .list { margin-right: 20px; position: relative; overflow: hidden; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

footer .netLink .list:hover { color: #ffefa5; }

footer .netLink .list:last-child { margin-right: 0; }

footer .netLink .link { padding: 10px; }

footer .netLink .link .text { letter-spacing: 1px; font-size: 14px; font-size: 0.875rem; font-weight: 600; }

footer .footerContact { font-size: 14px; font-size: 0.875rem; text-align: center; margin: 0 3vw; opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }

footer .address { line-height: 1.6; margin-bottom: 14px; }

footer .contactWay { margin-bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

footer .contactWay .list { margin-right: 30px; line-height: 1.6; }

footer .contactWay .list:last-child { margin-right: 0; }

footer .contactWay .list .subTitle { font-weight: 900; margin-right: 12px; }

footer .contactWay .list .title { font-weight: normal; }

footer .copyRight { font-size: 12px; font-size: 0.75rem; line-height: 1.6; color: #999; margin: 0 0 30px 0; width: 100%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }

footer .copyRight.show { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease 0.2s; -moz-transition: all 1s ease 0.2s; -ms-transition: all 1s ease 0.2s; -o-transition: all 1s ease 0.2s; transition: all 1s ease 0.2s; }

footer .copyRight .link { margin-left: 6px; display: inline; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

footer .copyRight .info { text-align: center; line-height: 1.4; }

footer .copyRight .info:hover .link { color: #ffefa5; }

@media (max-width: 1500px) { footer .allMiscellaneous { padding: 100px 2vw 0 2vw; } }

@media (max-width: 1366px) { footer .allMiscellaneous { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  footer .footerContact { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  footer .netLink { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; margin-bottom: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  footer .socialLink { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; width: 100%; margin-bottom: 50px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  footer .contactWay { margin-bottom: 50px; } }

@media (max-width: 1024px) { footer .allMiscellaneous { padding: 100px 2vw 0 2vw; } }

@media (max-width: 767px) { footer { padding: 0; }
  footer .contactWay { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  footer .contactWay .list { width: 50%; margin-right: 0; margin-bottom: 5px; }
  footer .contactWay .list:last-child { width: 100%; } }

@-webkit-keyframes flogo { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  10% { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
  20% { -webkit-transform: translateY(-4px); transform: translateY(-4px); }
  30% { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
  40% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  60% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  70% { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
  80% { -webkit-transform: translateY(-4px); transform: translateY(-4px); }
  90% { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); } }

@keyframes flogo { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  10% { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
  20% { -webkit-transform: translateY(-4px); transform: translateY(-4px); }
  30% { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
  40% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  60% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  70% { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
  80% { -webkit-transform: translateY(-4px); transform: translateY(-4px); }
  90% { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); } }

.home header.youMomLa .headerMenu .text { color: #000; }

.home header.youMomLa .headerMenu .humburger .line { background-color: #000; }

.home .titleBox { color: #fff; letter-spacing: 1px; text-align: center; margin-bottom: 80px; }

.home .titleBox .title { font-size: 40px; font-size: 2.5rem; margin-bottom: 20px; }

.home .titleBox .subTitle { font-size: 16px; font-size: 1rem; }

.home .billboard { color: #fff; }

.home .billboard .title { font-size: 36px; font-size: 2.25rem; }

.home .billboard .subTitle { color: #ffefa5; font-size: 24px; font-size: 1.5rem; margin-bottom: 40px; }

.home .billboard .imgFrame { position: relative; margin: 0 auto; }

.home .billboard .xBox { position: absolute; left: 16%; top: 28%; }

.home .billboard .xBox .title { width: 31.5vw; margin-bottom: 45px; }

.home .billboard .xBox .linkGroup { color: #ffefa5; font-size: 14px; font-size: 0.875rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); }

.home .billboard .xBox .linkGroup .list { margin-right: 15px; }

.home .billboard .xBox .linkGroup .list:last-child { margin-right: 0; }

.home .billboard .xBox .linkGroup .list .link { padding: 0 10px; }

.home .billboard .xBox .linkGroup .list .text { letter-spacing: 1px; }

.home .homeProItem { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.home .homeProItem .colorA { color: #fff; }

.home .homeProItem .colorB { color: #000; }

.home .homeProItem .colorC { color: #ffefa5; }

.home .homeProItem .item { position: relative; overflow: hidden; }

.home .homeProItem .item.show .xBox { opacity: 1; -webkit-transition: all 0.8s ease 0.6s; -moz-transition: all 0.8s ease 0.6s; -ms-transition: all 0.8s ease 0.6s; -o-transition: all 0.8s ease 0.6s; transition: all 0.8s ease 0.6s; }

.home .homeProItem .item.txtD .xBox { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.home .homeProItem .item .imgFrame { position: relative; }

.home .homeProItem .item .xBox { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 3.3vw; position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 0; }

.home .homeProItem .item .textBox { margin-right: auto; padding-right: 3vw; }

.home .homeProItem .item .title { font-size: 30px; font-size: 1.875rem; font-family: 'SegoeUIRegular','微軟正黑體'; }

.home .homeProItem .item .subTitle { font-size: 14px; font-size: 0.875rem; }

.home .homeProItem .item .moreBtn { font-weight: 900; margin-top: 9px; }

@media (max-width: 1366px) { .home .billboard .xBox { top: 22%; }
  .home .billboard .xBox .subTitle { margin-bottom: 30px; }
  .home .billboard .xBox .title { font-size: 28px; font-size: 1.75rem; width: 40vw; margin-bottom: 35px; } }

@media (max-width: 1024px) { .home .billboard .xBox { top: 40%; }
  .home .homeProItem .item { width: 100%; }
  .home .homeProItem .item.show .imgBox:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
  .home .homeProItem .item .xBox { position: relative; height: auto; }
  .home .homeProItem .item .title { font-size: 24px; font-size: 1.5rem; }
  .home .homeProItem .item .subTitle { font-size: 12px; font-size: 0.75rem; }
  .home .homeProItem .item .moreBtn { display: none; }
  .home .homeProItem .item .textBox { width: 100%; padding: 0; margin: auto; } }

@media (max-width: 767px) { .home .titleBox { margin-bottom: 40px; }
  .home .titleBox .title { font-size: 36px; font-size: 2.25rem; }
  .home .titleBox .subTitle { font-size: 16px; font-size: 1rem; }
  .home .billboard .xBox .title { font-size: 24px; font-size: 1.5rem; width: 100%; }
  .home .homeProItem { margin-top: 0; }
  .home .homeProItem .item .subTitle { font-size: 18px; font-size: 1.125rem; } }

.homeBannerWrap { height: 100vh; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; }

.homeBannerWrap .wrapFrame { position: relative; }

.homeBannerWrap .wrapFrame:after { content: ''; display: block; background-color: #fff; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeBannerWrap .wrapFrame.left { overflow: hidden; }

.homeBannerWrap .wrapFrame.left.show:after { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.homeBannerWrap .wrapFrame.left.show .textBox { opacity: 1; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.8s ease 0.8s; -moz-transition: all 0.8s ease 0.8s; -ms-transition: all 0.8s ease 0.8s; -o-transition: all 0.8s ease 0.8s; transition: all 0.8s ease 0.8s; }

.homeBannerWrap .wrapFrame.left .textBox { text-align: right; right: 4vw; opacity: 0; -webkit-transform: translate(-50px, -50%); -ms-transform: translate(-50px, -50%); transform: translate(-50px, -50%); }

.homeBannerWrap .wrapFrame.right.show:after { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.homeBannerWrap .wrapFrame.right.show .textBox { opacity: 1; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.8s ease 0.8s; -moz-transition: all 0.8s ease 0.8s; -ms-transition: all 0.8s ease 0.8s; -o-transition: all 0.8s ease 0.8s; transition: all 0.8s ease 0.8s; }

.homeBannerWrap .wrapFrame.right .textBox { text-align: left; left: 25.5vw; padding-right: 3vw; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; -webkit-transform: translate(50px, -50%); -ms-transform: translate(50px, -50%); transform: translate(50px, -50%); }

.homeBannerWrap .wrapFrame.right .imgBox { height: 110vh; }

.homeBannerWrap .imgBox { height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 0%; }

.homeBannerWrap .textBox { letter-spacing: 1px; width: 50%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.homeBannerWrap .textBox > :first-child { margin-bottom: 40px; }

.homeBannerWrap .xBox { word-break: break-word; }

.homeBannerWrap .xBox .title { font-size: 72px; font-size: 4.5rem; width: 100%; }

.homeBannerWrap .xBox .subTitle { font-size: 22px; font-size: 1.375rem; width: 100%; }

.homeBannerWrap .scroll_frame { font-size: 12px; font-size: 0.75rem; letter-spacing: 1px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; right: 54vw; bottom: 0; z-index: 1; opacity: 0; }

.homeBannerWrap .scroll_frame.show { opacity: 1; -webkit-transition: all 0.5s ease 1.5s; -moz-transition: all 0.5s ease 1.5s; -ms-transition: all 0.5s ease 1.5s; -o-transition: all 0.5s ease 1.5s; transition: all 0.5s ease 1.5s; }

.homeBannerWrap .scroll_frame .text { cursor: pointer; margin-bottom: 20px; }

.homeBannerWrap .scroll_frame .line { background-color: #fff; display: block; width: 1px; height: 24vh; margin-right: 1px; }

.homeBannerWrap .combinationIcon { color: #fff; background-color: #000; padding: 0 15px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; right: 0; bottom: 0; z-index: 3; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.homeBannerWrap .combinationIcon.show { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity .5s ease 1.2s, transform .5s ease 1.2s; -moz-transition: opacity .5s ease 1.2s, transform .5s ease 1.2s; -ms-transition: opacity .5s ease 1.2s, transform .5s ease 1.2s; -o-transition: opacity .5s ease 1.2s, transform .5s ease 1.2s; -webkit-transition: opacity .5s ease 1.2s, -webkit-transform .5s ease 1.2s; transition: opacity .5s ease 1.2s, -webkit-transform .5s ease 1.2s; transition: opacity .5s ease 1.2s, transform .5s ease 1.2s; transition: opacity .5s ease 1.2s, transform .5s ease 1.2s, -webkit-transform .5s ease 1.2s; }

.homeBannerWrap .combinationIcon.stuck { position: absolute; bottom: -10vh; }

.homeBannerWrap .combinationIcon .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.homeBannerWrap .combinationIcon .list .link { padding: 24px 10px; display: block; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeBannerWrap .combinationIcon .list .link:hover { color: #fff0ab; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }

.homeBannerWrap .combinationIcon .list:after { content: ''; display: block; background-color: #fff; width: 1px; height: 10px; margin: 0 15px; }

.homeBannerWrap .combinationIcon .list:last-child:after { display: none; }

.homeBannerWrap .newsSection { letter-spacing: 1px; color: #fff; background-color: #434343; width: 65%; min-height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; left: 6vw; bottom: 0; z-index: 2; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeBannerWrap .newsSection.show { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease 1.2s; -moz-transition: all 1s ease 1.2s; -ms-transition: all 1s ease 1.2s; -o-transition: all 1s ease 1.2s; transition: all 1s ease 1.2s; }

.homeBannerWrap .newsSection.stuck { opacity: 0; visibility: hidden; z-index: -1; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeBannerWrap .newsSection .sec { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; padding: 15px 2vw; }

.homeBannerWrap .newsSection .sec .date { font-size: 18px; font-size: 1.125rem; font-family: 'YesevaOneRegular', '微軟正黑體'; margin-bottom: 5px; }

.homeBannerWrap .newsSection .sec .title { font-size: 14px; font-size: 0.875rem; line-height: 1.6; }

.homeBannerWrap .newsSection .frame { -webkit-box-sizing: border-box; box-sizing: border-box; border-right: solid 1px #565656; padding: 10px; width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.homeBannerWrap .newsSection .closeSec { -webkit-box-sizing: border-box; box-sizing: border-box; width: 120px; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.homeBannerWrap .newsSection .closeSec .closeBtn { cursor: pointer; border-radius: 50%; border: solid 2px #fff; width: 20px; height: 20px; position: relative; }

.homeBannerWrap .newsSection .closeSec .cross { display: block; width: 7px; height: 7px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }

.homeBannerWrap .newsSection .closeSec .cross:before, .homeBannerWrap .newsSection .closeSec .cross:after { content: ''; display: block; background-color: #fff; width: 7px; height: 1px; position: absolute; left: 0; top: 0; }

.homeBannerWrap .newsSection .closeSec .cross:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.homeBannerWrap .newsSection .closeSec .cross:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

@media (max-width: 1366px) { .homeBannerWrap .textBox { width: 60%; }
  .homeBannerWrap .wrapFrame.left .textBox { right: 4vw; }
  .homeBannerWrap .wrapFrame.right .textBox { left: 21vw; }
  .homeBannerWrap .xBox .title { font-size: 60px; font-size: 3.75rem; }
  .homeBannerWrap .xBox .subTitle { font-size: 20px; font-size: 1.25rem; } }

@media (max-width: 1024px) { .homeBannerWrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .homeBannerWrap .wrapFrame { width: 100%; height: 100%; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }
  .homeBannerWrap .wrapFrame.slowHide { opacity: 0; visibility: hidden; }
  .homeBannerWrap .wrapFrame.right { position: absolute; left: 0; top: 0; }
  .homeBannerWrap .wrapFrame.right .imgBox { height: 100%; }
  .homeBannerWrap .scroll_frame { right: 50vw; }
  .homeBannerWrap .combinationIcon.stuck { position: absolute; bottom: 0; }
  .homeBannerWrap .newsSection { width: 60%; left: 0; } }

@media (max-width: 767px) { .homeBannerWrap .xBox .title { font-size: 48px; font-size: 3rem; }
  .homeBannerWrap .xBox .subTitle { font-size: 18px; font-size: 1.125rem; }
  .homeBannerWrap .wrapFrame .textBox { width: 70%; text-align: right !important; left: auto !important; right: 8vw !important; top: auto; bottom: 15%; padding: 0 !important; -webkit-transform: inherit; -ms-transform: inherit; transform: inherit; }
  .homeBannerWrap .scroll_frame { display: none; }
  .homeBannerWrap .textBox > :first-child { margin-bottom: 20px; }
  .homeBannerWrap .combinationIcon { position: absolute !important; bottom: 0 !important; padding: 15px 10px; }
  .homeBannerWrap .newsSection { display: none; } }

@media (max-width: 413px) { .homeBannerWrap .combinationIcon { padding: 15px 10px; }
  .homeBannerWrap .combinationIcon .list:after { margin: 0 10px; } }

@media (max-width: 374px) { .homeBannerWrap .combinationIcon .list .link { padding: 24px 6px; } }

@media (max-height: 1365px) { .homeBannerWrap .scroll_frame .line { height: 15vh; } }

.homeCustomDrums { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100vh; padding-top: 24vh; padding-bottom: 20vh; }

@media (min-height: 1080px) { .homeCustomDrums { padding-top: 29vh; padding-bottom: 24vh; } }

@media (max-width: 767px) { .homeCustomDrums { padding-top: 16vh; padding-bottom: 16vh; } }

.homeCustomFrame { display: -webkit-box; display: -ms-flexbox; display: flex; }

@media (max-width: 1024px) { .homeCustomFrame { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }

.homeCustomBox { width: 28%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; overflow: hidden; }

.homeCustomBox:after { display: block; color: #e8e8e8; position: absolute; right: -6%; top: 10%; font-size: 300px; font-size: 18.75rem; font-family: 'YesevaOneRegular'; opacity: 0; }

.homeCustomBox:before { content: ''; display: block; background-color: #e8e8e8; width: 1px; height: 100%; position: absolute; right: 0; top: 0; }

.homeCustomBox.show:after { opacity: 0.5; }

.homeCustomBox.show.left:after { -webkit-transition: all 0.5s ease 0.8s; -moz-transition: all 0.5s ease 0.8s; -ms-transition: all 0.5s ease 0.8s; -o-transition: all 0.5s ease 0.8s; transition: all 0.5s ease 0.8s; }

.homeCustomBox.show.mid:after { -webkit-transition: all 0.5s ease 1.2s; -moz-transition: all 0.5s ease 1.2s; -ms-transition: all 0.5s ease 1.2s; -o-transition: all 0.5s ease 1.2s; transition: all 0.5s ease 1.2s; }

.homeCustomBox.show.right:after { -webkit-transition: all 0.5s ease 1.6s; -moz-transition: all 0.5s ease 1.6s; -ms-transition: all 0.5s ease 1.6s; -o-transition: all 0.5s ease 1.6s; transition: all 0.5s ease 1.6s; }

.homeCustomBox.show .title:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0.2s; -moz-transition: all 0.8s ease 0.2s; -ms-transition: all 0.8s ease 0.2s; -o-transition: all 0.8s ease 0.2s; transition: all 0.8s ease 0.2s; }

.homeCustomBox.show .typeBox { opacity: 1; -webkit-transition: all 1s ease 0.4s; -moz-transition: all 1s ease 0.4s; -ms-transition: all 1s ease 0.4s; -o-transition: all 1s ease 0.4s; transition: all 1s ease 0.4s; }

.homeCustomBox.show .sectionBox { opacity: 1; -webkit-transition: all 1s ease 0.4s; -moz-transition: all 1s ease 0.4s; -ms-transition: all 1s ease 0.4s; -o-transition: all 1s ease 0.4s; transition: all 1s ease 0.4s; }

.homeCustomBox.show .goDesign { opacity: 1; -webkit-transition: all 1s ease 0.4s; -moz-transition: all 1s ease 0.4s; -ms-transition: all 1s ease 0.4s; -o-transition: all 1s ease 0.4s; transition: all 1s ease 0.4s; }

.homeCustomBox:last-child:before { display: none; }

.homeCustomBox.left:after { content: '1'; }

.homeCustomBox.mid { width: 44%; }

.homeCustomBox.mid:after { content: '2'; }

.homeCustomBox.right { padding-left: 4vw; -webkit-box-sizing: border-box; box-sizing: border-box; }

.homeCustomBox.right .box { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.homeCustomBox.right:after { content: '3'; }

.homeCustomBox .box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.homeCustomBox .title { font-size: 36px; font-size: 2.25rem; margin-bottom: 60px; position: relative; overflow: hidden; }

.homeCustomBox .title:after { content: ''; display: block; background-color: #ccc; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeCustomBox .typeBox { opacity: 0; }

.homeCustomBox .typeBox .list { cursor: pointer; color: #ccc; border: solid 4px #ccc; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; width: 125px; height: 125px; margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; position: relative; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeCustomBox .typeBox .list:before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; z-index: 0; }

.homeCustomBox .typeBox .list:hover { -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }

.homeCustomBox .typeBox .list:hover:before { -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeCustomBox .typeBox .list.choose { color: #000; border-color: #000; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.homeCustomBox .typeBox .list.choose .icon { color: #000; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.homeCustomBox .typeBox .list.choose .cross:before, .homeCustomBox .typeBox .list.choose .cross:after { background-color: #000; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.homeCustomBox .typeBox .link { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 1; }

.homeCustomBox .typeBox .icon { color: #ccc; z-index: 1; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeCustomBox .typeBox img { width: auto; z-index: 1; }

.homeCustomBox .typeBox .text { font-size: 12px; font-size: 0.75rem; font-weight: 900; letter-spacing: 1px; }

.homeCustomBox .typeBox .cross { display: block; margin-top: 10px; margin-bottom: 20px; }

.homeCustomBox .typeBox .cross:before, .homeCustomBox .typeBox .cross:after { content: ''; display: block; background-color: #ccc; width: 23px; height: 2px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeCustomBox .typeBox .cross:after { -webkit-transform: rotate(90deg) translateX(-1px); -ms-transform: rotate(90deg) translateX(-1px); transform: rotate(90deg) translateX(-1px); }

.homeCustomBox .goDesign { letter-spacing: 1px; color: #1d1d1d; padding-top: 2vw; opacity: 0; }

.homeCustomBox .goDesign .title { font-size: 40px; font-size: 2.5rem; font-family: 'SegoeUIRegular', '微軟正黑體'; margin-bottom: 20px; width: 80%; }

.homeCustomBox .goDesign .text { font-size: 16px; font-size: 1rem; line-height: 1.6; margin-bottom: 40px; width: 80%; }

.homeCustomBox .goDesign .goSec { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.homeCustomBox .goDesign .goSec .btnSec { margin-right: 30px; }

.homeCustomBox .goDesign .goSec .text { font-size: 14px; font-size: 0.875rem; font-weight: 900; margin-bottom: 0; width: 34%; }

.homeCustomBox .drumFrame { width: 100%; letter-spacing: 0.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeCustomBox .drumFrame.hide { opacity: 0; visibility: hidden; }

.homeCustomBox .drumFrame .frameBox { width: 100%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.homeCustomBox .drumFrame .drumBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.homeCustomBox .drumFrame .changeBtn { cursor: pointer; font-size: 40px; font-size: 2.5rem; position: absolute; top: 50%; z-index: 1; }

.homeCustomBox .drumFrame .changeBtn.prevBtn { left: 8%; }

.homeCustomBox .drumFrame .changeBtn.nextBtn { right: 8%; }

.homeCustomBox .drumFrame .homeDrumCanvas { width: 22.4vw; margin: 0 auto; }

.homeCustomBox .drumFrame .title { font-size: 16px; font-size: 1rem; line-height: 1.6; text-align: center; margin-bottom: 20px; }

.homeCustomBox .drumFrame .title .name { font-size: 22px; font-size: 1.375rem; font-weight: 900; margin-right: 16px; }

.homeCustomBox .typeListBox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 100px; margin-top: -100px; }

.homeCustomBox .typeListBox.over7 { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; max-width: 460px; overflow: hidden; }

.homeCustomBox .typeList { margin: 0 auto; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

.homeCustomBox .typeList .list { position: relative; margin: 0 10px 0 10px; }

.homeCustomBox .typeList .imgFrame { -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; width: 46px; height: 46px; overflow: hidden; position: relative; }

.homeCustomBox .typeList .imgFrame:after { content: ''; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 0px #000; border-radius: 50%; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeCustomBox .typeList .imgFrame:hover:after { border: solid 4px #000; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }

.homeCustomBox .typeList .imgFrame:hover + .textFrame { visibility: visible; opacity: 1; }

.homeCustomBox .typeList .textFrame { -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; background-color: #000; font-size: 12px; font-size: 0.75rem; letter-spacing: 1px; text-align: center; padding: 14px 5px 10px; max-width: 145px; width: 150px; position: absolute; bottom: calc(100% + 20px); left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); visibility: hidden; opacity: 0; }

.homeCustomBox .typeList .textFrame:after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 12px 7px 0 7px; border-color: #000 transparent transparent transparent; position: absolute; left: 50%; bottom: -12px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }

.homeCustomBox .typeList .textFrame .material { line-height: 1.6; }

.homeCustomBox .typeList .textFrame .name { font-weight: 900; line-height: 1.6; }

.homeCustomBox .sectionBox { opacity: 0; position: relative; }

.homeCustomBox .sectionBox .multiple { position: absolute; left: 0; top: 0; }

@media (max-width: 1366px) { .homeCustomBox .title { font-size: 24px; font-size: 1.5rem; margin-bottom: 60px; }
  .homeCustomBox .drumFrame .changeBtn.prevBtn { left: 3%; }
  .homeCustomBox .drumFrame .changeBtn.nextBtn { right: 3%; } }

@media (max-width: 1260px) { .homeCustomBox .typeList .ps__rail-x { visibility: visible; } }

@media (max-width: 1200px) { .homeCustomBox .typeBox .list { width: 100px; height: 100px; }
  .homeCustomBox .goDesign .title { font-size: 30px; font-size: 1.875rem; }
  .homeCustomBox .goDesign .text { font-size: 14px; font-size: 0.875rem; }
  .homeCustomBox .goDesign .goSec .text { font-size: 12px; font-size: 0.75rem; } }

@media (max-width: 1024px) { .homeCustomBox { width: 100%; }
  .homeCustomBox:after { display: none; }
  .homeCustomBox.mid { width: 100%; margin-bottom: 50px; padding: 0 6%; }
  .homeCustomBox.left { margin-bottom: 90px; }
  .homeCustomBox.left .title { display: none; }
  .homeCustomBox.left .typeBox { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .homeCustomBox.left .typeBox .list { margin: 0 20px; }
  .homeCustomBox.right { padding: 0 25%; }
  .homeCustomBox.right .title { display: none; }
  .homeCustomBox .frameBox { padding: 0; }
  .homeCustomBox .drumFrame { padding: 0 5%; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .homeCustomBox .drumFrame .homeDrumCanvas { width: 90%; }
  .homeCustomBox .changeBtn.prevBtn { left: -5%; }
  .homeCustomBox .changeBtn.nextBtn { right: -5%; }
  .homeCustomBox .typeList { max-width: 330px; } }

@media (max-width: 767px) { .homeCustomBox.mid { padding: 0; }
  .homeCustomBox.left { margin-bottom: 30px; }
  .homeCustomBox.left .xBox { width: 100%; overflow: hidden; margin-left: auto; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .homeCustomBox.right .goDesign { margin: 0 auto; }
  .homeCustomBox.right .goDesign .text { display: none; }
  .homeCustomBox.right .goDesign .btnSec { margin: 0; }
  .homeCustomBox .typeBox { -webkit-transform: translateX(50vw); -ms-transform: translateX(50vw); transform: translateX(50vw); width: auto; margin-left: -45px; }
  .homeCustomBox .typeBox .list { width: 90px; height: 90px; margin: 0 20px 0 0 !important; }
  .homeCustomBox .typeBox .list:last-child { margin: 0 !important; }
  .homeCustomBox .frameBox .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .homeCustomBox .drumFrame { padding: 0; }
  .homeCustomBox .changeBtn { display: none; }
  .homeCustomBox .typeList { max-width: 200px; }
  .homeCustomBox .title { margin-bottom: 30px; } }

.homeGroup { background-color: #161616; padding: 10vw 0 7vw 0; }

.homeGroup .groupMember { padding: 0 6vw; }

.homeGroup .groupMember .titleBox.show .sBox .title:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

.homeGroup .groupMember .titleBox.show .sBox .subTitle:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0.4s; -moz-transition: all 0.8s ease 0.4s; -ms-transition: all 0.8s ease 0.4s; -o-transition: all 0.8s ease 0.4s; transition: all 0.8s ease 0.4s; }

.homeGroup .groupMember .titleBox .sBox { margin: 0 auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; }

.homeGroup .groupMember .titleBox .sBox .title { position: relative; }

.homeGroup .groupMember .titleBox .sBox .title:after { content: ''; display: block; background-color: #ffefa5; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeGroup .groupMember .titleBox .sBox .subTitle { position: relative; }

.homeGroup .groupMember .titleBox .sBox .subTitle:after { content: ''; display: block; background-color: #ffefa5; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeGroup .groupMember .billboard.show .imgFrame:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

.homeGroup .groupMember .billboard.show .xBox .subTitle, .homeGroup .groupMember .billboard.show .xBox .title, .homeGroup .groupMember .billboard.show .xBox .linkGroup, .homeGroup .groupMember .billboard.show .xBox .playBtn { opacity: 1; -webkit-transition: all 0s ease 0.8s; -moz-transition: all 0s ease 0.8s; -ms-transition: all 0s ease 0.8s; -o-transition: all 0s ease 0.8s; transition: all 0s ease 0.8s; }

.homeGroup .groupMember .billboard.show .xBox .subTitle:after, .homeGroup .groupMember .billboard.show .xBox .title:after, .homeGroup .groupMember .billboard.show .xBox .linkGroup:after, .homeGroup .groupMember .billboard.show .xBox .playBtn:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 1.2s ease 0.8s; -moz-transition: all 1.2s ease 0.8s; -ms-transition: all 1.2s ease 0.8s; -o-transition: all 1.2s ease 0.8s; transition: all 1.2s ease 0.8s; }

.homeGroup .groupMember .billboard.show .objectSwiperBox { opacity: 1; -webkit-transition: all 0s ease 0.8s; -moz-transition: all 0s ease 0.8s; -ms-transition: all 0s ease 0.8s; -o-transition: all 0s ease 0.8s; transition: all 0s ease 0.8s; }

.homeGroup .groupMember .billboard.show .objectSwiperBox:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 1.5s ease 0.8s; -moz-transition: all 1.5s ease 0.8s; -ms-transition: all 1.5s ease 0.8s; -o-transition: all 1.5s ease 0.8s; transition: all 1.5s ease 0.8s; }

.homeGroup .groupMember .billboard .imgFrame { position: relative; overflow: hidden; }

.homeGroup .groupMember .billboard .imgFrame:after { content: ''; display: block; background-color: #1d1d1d; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeGroup .groupMember .billboard .xBox .subTitle, .homeGroup .groupMember .billboard .xBox .title, .homeGroup .groupMember .billboard .xBox .linkGroup, .homeGroup .groupMember .billboard .xBox .playBtn { overflow: hidden; position: relative; opacity: 0; }

.homeGroup .groupMember .billboard .xBox .subTitle:after, .homeGroup .groupMember .billboard .xBox .title:after, .homeGroup .groupMember .billboard .xBox .linkGroup:after, .homeGroup .groupMember .billboard .xBox .playBtn:after { content: ''; display: block; background-color: #ffefa5; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeGroup .groupMember .billboard .objectSwiperBox { overflow: hidden; opacity: 0; }

.homeGroup .groupMember .billboard .objectSwiperBox:after { content: ''; display: block; background-color: #000; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }

.homeGroup .homeObject { padding: 10vw 6vw 0; }

@media (max-width: 1024px) { .homeGroup { padding: 10vh 0 0 0; }
  .homeGroup .homeObject { padding: 0 6vw 0; } }

@media (max-width: 767px) { .homeGroup .groupMember { padding: 0; }
  .homeGroup .homeObject { padding: 0; } }

.homeProfessional { margin-bottom: 12vw; }

.homeProfessional .homeProItem { width: 100%; margin-top: -7vw; -webkit-transform: translateX(-6vw); -ms-transform: translateX(-6vw); transform: translateX(-6vw); }

.homeProfessional .homeProItem .item { width: 33.3%; height: auto; margin-bottom: 100px; }

.homeProfessional .homeProItem .item.show .imgBox:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.homeProfessional .homeProItem .item .imgBox { position: relative; overflow: hidden; }

.homeProfessional .homeProItem .item .imgBox:after { content: ''; display: block; background-color: #1d1d1d; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }

.homeProfessional .homeProItem .item:nth-child(3n-1) { -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); }

.homeProfessional .homeProItem .item:nth-child(3n-1).show .imgBox:after { -webkit-transition: all 0.6s ease 0.4s; -moz-transition: all 0.6s ease 0.4s; -ms-transition: all 0.6s ease 0.4s; -o-transition: all 0.6s ease 0.4s; transition: all 0.6s ease 0.4s; }

.homeProfessional .homeProItem .item:nth-child(3n-1).show .xBox { -webkit-transition: all 0.8s ease 1s; -moz-transition: all 0.8s ease 1s; -ms-transition: all 0.8s ease 1s; -o-transition: all 0.8s ease 1s; transition: all 0.8s ease 1s; }

.homeProfessional .homeProItem .item:nth-child(3n) { -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); }

.homeProfessional .homeProItem .item:nth-child(3n).show .imgBox:after { -webkit-transition: all 0.6s ease 0.8s; -moz-transition: all 0.6s ease 0.8s; -ms-transition: all 0.6s ease 0.8s; -o-transition: all 0.6s ease 0.8s; transition: all 0.6s ease 0.8s; }

.homeProfessional .homeProItem .item:nth-child(3n).show .xBox { -webkit-transition: all 0.8s ease 1.4s; -moz-transition: all 0.8s ease 1.4s; -ms-transition: all 0.8s ease 1.4s; -o-transition: all 0.8s ease 1.4s; transition: all 0.8s ease 1.4s; }

.homeProfessional .homeProItem .item.big { width: 66.6%; }

@media (max-width: 1024px) { .homeProfessional .homeProItem { margin-top: -100px; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
  .homeProfessional .homeProItem .colorB { color: #fff; }
  .homeProfessional .homeProItem .colorC { color: #fff; }
  .homeProfessional .homeProItem .item { width: 100%; margin-bottom: 90px; }
  .homeProfessional .homeProItem .item .xBox { padding: 3.5vw 0; }
  .homeProfessional .homeProItem .item .textBox { padding: 0 20px 0 20%; }
  .homeProfessional .homeProItem .item:nth-child(3n-1) { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  .homeProfessional .homeProItem .item:nth-child(3n-1).show .imgBox:after { -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
  .homeProfessional .homeProItem .item:nth-child(3n-1).show .xBox { -webkit-transition: all 0.8s ease 0.6s; -moz-transition: all 0.8s ease 0.6s; -ms-transition: all 0.8s ease 0.6s; -o-transition: all 0.8s ease 0.6s; transition: all 0.8s ease 0.6s; }
  .homeProfessional .homeProItem .item:nth-child(3n-1) .textBox { padding: 0 20px; }
  .homeProfessional .homeProItem .item:nth-child(3n-1) .imgFrame .imgBox { margin: auto; }
  .homeProfessional .homeProItem .item:nth-child(3n-1) .imgFrame .xBox { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .homeProfessional .homeProItem .item:nth-child(3n) { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  .homeProfessional .homeProItem .item:nth-child(3n).show .imgBox:after { -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
  .homeProfessional .homeProItem .item:nth-child(3n).show .xBox { -webkit-transition: all 0.8s ease 0.6s; -moz-transition: all 0.8s ease 0.6s; -ms-transition: all 0.8s ease 0.6s; -o-transition: all 0.8s ease 0.6s; transition: all 0.8s ease 0.6s; }
  .homeProfessional .homeProItem .item:nth-child(3n) .textBox { padding: 0 20% 0 20px; }
  .homeProfessional .homeProItem .item:nth-child(3n) .imgFrame .imgBox { margin-left: auto; }
  .homeProfessional .homeProItem .item:nth-child(3n) .imgFrame .xBox { text-align: right; }
  .homeProfessional .homeProItem .item.big .imgFrame { width: 100%; }
  .homeProfessional .homeProItem .item.big .imgFrame .imgBox { width: 100%; }
  .homeProfessional .homeProItem .item .imgFrame { width: 100%; height: auto; }
  .homeProfessional .homeProItem .item .imgFrame .imgBox { width: 50%; } }

@media (max-width: 767px) { .homeProfessional .homeProItem { margin-top: 0; }
  .homeProfessional .homeProItem .item.big { width: 80%; }
  .homeProfessional .homeProItem .item .imgFrame .imgBox { width: 60%; }
  .homeProfessional .titleBox { padding: 0 6vw; }
  .homeProfessional .billboard { padding: 0 6vw; }
  .homeProfessional .billboard .imgFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .homeProfessional .billboard .xBox { padding: 45px 0 100px 0; margin: 0 auto; position: relative; left: 0; top: 0; display: inline-block; padding-left: 20%; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } }

@media (max-width: 500px) { .homeProfessional .homeProItem { margin-top: 0; }
  .homeProfessional .homeProItem .item.big { width: 85%; }
  .homeProfessional .homeProItem .item .imgFrame .imgBox { width: 70%; }
  .homeProfessional .billboard .xBox .linkGroup .list { margin-right: 0; } }

@media (max-width: 413px) { .homeProfessional .billboard .xBox { padding-left: 0; } }

.homeMedia { position: relative; }

.homeMedia .homeProItem { margin-top: -12vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.homeMedia .homeProItem .item { width: 50%; margin-top: -5vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.homeMedia .homeProItem .item.show .imgBox:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.homeMedia .homeProItem .item .imgBox { position: relative; overflow: hidden; }

.homeMedia .homeProItem .item .imgBox:after { content: ''; display: block; background-color: #1d1d1d; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }

.homeMedia .homeProItem .item.right { margin-left: auto; }

.homeMedia .homeProItem .item.big .imgFrame { width: 78%; }

.homeMedia .homeProItem .item.mid .imgFrame { width: 67%; }

.homeMedia .homeProItem .item.small .imgFrame { width: 45%; }

.homeMedia .billboard .xBox { top: 40%; }

.homeMedia .billboard .playBtn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.homeMedia .billboard .playBtn .videoBtn { cursor: pointer; width: 65px; height: 65px; margin-right: 30px; border: solid 1px #ffefa5; border-radius: 50%; position: relative; }

.homeMedia .billboard .playBtn .videoBtn .triangle { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8.7px; border-color: transparent transparent transparent #ffefa5; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.homeMedia .billboard .playBtn .text { font-size: 14px; font-size: 0.875rem; font-weight: 900; }

@media (max-width: 1366px) { .homeMedia .homeProItem { margin-top: -6vw; }
  .homeMedia .homeProItem .item.big .imgFrame { width: 90%; max-width: 450px; }
  .homeMedia .homeProItem .item.mid .imgFrame { width: 80%; max-width: 380px; }
  .homeMedia .homeProItem .item.small .imgFrame { width: 70%; max-width: 300px; } }

@media (max-width: 1024px) { .homeMedia .homeProItem { margin-top: -100px; }
  .homeMedia .homeProItem .item { width: 100%; margin-top: 0; margin-bottom: 90px; }
  .homeMedia .homeProItem .item .imgFrame { width: inherit !important; max-width: inherit !important; }
  .homeMedia .homeProItem .item .imgFrame .imgBox { margin-left: 6vw; }
  .homeMedia .homeProItem .item .xBox { padding: 3.5vw 20px 3.5vw 20%; }
  .homeMedia .homeProItem .item.big .imgBox { width: 55%; }
  .homeMedia .homeProItem .item.small .imgBox { width: 35%; }
  .homeMedia .homeProItem .item.mid .imgBox { width: 45%; }
  .homeMedia .homeProItem .item.right .xBox { padding: 3.5vw 20% 3.5vw 20px; }
  .homeMedia .homeProItem .item.right .xBox .textBox { text-align: right; }
  .homeMedia .homeProItem .item.right .imgBox { margin-left: auto; } }

@media (max-width: 768px) { .homeMedia .homeProItem { margin-top: 0; }
  .homeMedia .homeProItem .item { margin-top: 0; margin-bottom: 90px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
  .homeMedia .homeProItem .item:nth-child(2n) { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } }

@media (max-width: 767px) { .homeMedia .homeProItem { margin-top: 0; }
  .homeMedia .homeProItem .item.big .imgBox { width: 65%; }
  .homeMedia .homeProItem .item.mid .imgBox { width: 45%; }
  .homeMedia .homeProItem .item.small .imgBox { width: 55%; }
  .homeMedia .titleBox { padding: 0 6vw; }
  .homeMedia .billboard { padding: 0 6vw; }
  .homeMedia .billboard .imgFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .homeMedia .billboard .xBox { padding: 45px 0 100px 0; margin: 0 auto; position: relative; left: 0; top: 0; display: inline-block; } }

@media (max-width: 500px) { .homeMedia .homeProItem { margin-top: 0; }
  .homeMedia .homeProItem .item.big .imgBox { width: 75%; }
  .homeMedia .homeProItem .item.mid .imgBox { width: 55%; }
  .homeMedia .homeProItem .item.small .imgBox { width: 65%; } }

.homeObject { position: relative; }

.homeObject .titleBox { position: relative; z-index: 2; }

.homeObject .homeProItem { width: 100%; padding: 0 6vw; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 1; }

.homeObject .homeProItem .item { width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.homeObject .homeProItem .item.show .imgBox:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.homeObject .homeProItem .item .imgBox { position: relative; overflow: hidden; }

.homeObject .homeProItem .item .imgBox:after { content: ''; display: block; background-color: #1d1d1d; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }

.homeObject .homeProItem .item.right { margin-left: auto; }

.homeObject .billboard { position: relative; }

.homeObject .objectSwiperBox { position: absolute; right: -14vw; top: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.homeObject .objectSwiperBox .prevBtn { margin-right: 50px; }

.homeObject .objectSwiper { width: 80vw; position: relative; }

.homeObject .objectSwiper:after { content: ''; display: block; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; top: 50%; }

.homeObject .objectSwiper .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.homeObject .objectSwiper .imgBox { width: 12.5vw; height: 12.5vw; border-radius: 50%; overflow: hidden; position: relative; }

.homeObject .objectSwiper .imgBox:hover .hoverBox .text { -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.homeObject .objectSwiper .imgBox:hover .hoverBox:after { -webkit-transition: all 0.5s ease 0.2s; -moz-transition: all 0.5s ease 0.2s; -ms-transition: all 0.5s ease 0.2s; -o-transition: all 0.5s ease 0.2s; transition: all 0.5s ease 0.2s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.homeObject .objectSwiper .hoverBox { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.homeObject .objectSwiper .hoverBox .text { color: #fff0ab; font-size: 24px; font-size: 1.5rem; letter-spacing: 1px; position: relative; z-index: 1; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeObject .objectSwiper .hoverBox:after { content: ''; display: block; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

@media (max-width: 1366px) { .homeObject .homeProItem .item .imgFrame { width: 70%; max-width: 300px; } }

@media (max-width: 1024px) { .homeObject { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .homeObject .titleBox { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .homeObject .homeProItem { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; position: relative; padding: 0; margin-bottom: 5vh; }
  .homeObject .homeProItem .item { width: 100%; }
  .homeObject .homeProItem .item .xBox { padding: 3.5vw 20px 3.5vw 20%; }
  .homeObject .homeProItem .item .imgFrame { width: inherit; max-width: inherit; }
  .homeObject .homeProItem .item .imgFrame .imgBox { width: 35%; }
  .homeObject .homeProItem .item.right .xBox { padding: 3.5vw 20% 3.5vw 20px; text-align: right; }
  .homeObject .homeProItem .item.right .imgBox { margin-left: auto; }
  .homeObject .billboard { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .homeObject .objectSwiperBox { right: -18vw; }
  .homeObject .objectSwiper { width: 90vw; }
  .homeObject .objectSwiper .imgBox { width: 100%; height: 100%; } }

@media (max-width: 767px) { .homeObject .homeProItem .item .imgFrame .imgBox { width: 45%; }
  .homeObject .titleBox { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 0 20px; position: absolute; top: 40%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; }
  .homeObject .objectSwiper { width: 180vw; -webkit-transform: translateX(40vw); -ms-transform: translateX(40vw); transform: translateX(40vw); }
  .homeObject .objectSwiper:after { display: none; }
  .homeObject .objectSwiper .swiper-slide { padding: 0 8vw; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .homeObject .objectSwiper .hoverBox .text { font-size: 16px; font-size: 1rem; }
  .homeObject .objectSwiperBox { right: 0; }
  .homeObject .objectSwiperBox .prevBtn { display: none; } }

@media (max-width: 500px) { .homeObject .homeProItem .item .imgFrame .imgBox { width: 55%; } }

.homeNews { width: 88%; margin: 0 auto; padding: 9vw 6vw 4vw; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }

.homeNews .newsTitleBox { color: #000; margin-bottom: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.homeNews .newsTitleBox.show .title:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

.homeNews .newsTitleBox.show .moreSec:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

.homeNews .newsTitleBox .title { font-size: 45px; font-size: 2.8125rem; padding-right: 20px; position: relative; overflow: hidden; }

.homeNews .newsTitleBox .title:after { content: ''; display: block; background-color: #f7f7f7; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeNews .newsTitleBox .moreSec { font-size: 14px; font-size: 0.875rem; font-weight: 900; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; overflow: hidden; }

.homeNews .newsTitleBox .moreSec:after { content: ''; display: block; background-color: #f7f7f7; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }

.homeNews .newsTitleBox .moreSec .text { margin-right: 30px; letter-spacing: 1px; }

.homeNews .homeNewsSwiper.show .link { opacity: 1; -webkit-transition: all 0.8s ease 1.4s; -moz-transition: all 0.8s ease 1.4s; -ms-transition: all 0.8s ease 1.4s; -o-transition: all 0.8s ease 1.4s; transition: all 0.8s ease 1.4s; }

.homeNews .homeNewsSwiper.show .date:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

.homeNews .homeNewsSwiper.show .describe:after { -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 0.8s ease 0.6s; -moz-transition: all 0.8s ease 0.6s; -ms-transition: all 0.8s ease 0.6s; -o-transition: all 0.8s ease 0.6s; transition: all 0.8s ease 0.6s; }

.homeNews .newsGroup { display: -webkit-box; display: -ms-flexbox; display: flex; }

.homeNews .newsGroup .list { width: 33.33%; margin-right: 7.5vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; overflow: hidden; }

.homeNews .newsGroup .list:last-child { margin-right: 0; }

.homeNews .newsGroup .date { font-size: 24px; font-size: 1.5rem; font-family: 'YesevaOneRegular', '微軟正黑體'; margin-bottom: 35px; position: relative; overflow: hidden; }

.homeNews .newsGroup .date:after { content: ''; display: block; background-color: #f7f7f7; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeNews .newsGroup .describe { letter-spacing: 1px; color: #666; font-size: 20px; font-size: 1.25rem; line-height: 1.4; height: 110px; margin-bottom: 40px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-break: break-all; -webkit-box-orient: vertical; position: relative; overflow: hidden; }

.homeNews .newsGroup .describe:after { content: ''; display: block; background-color: #f7f7f7; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.homeNews .newsGroup .link { color: #999; padding: 10px; -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); display: inline-block; -ms-flex-item-align: end; align-self: flex-end; overflow: hidden; opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.homeNews .newsGroup .link:hover { color: #ffefa5; }

.homeNews .newsGroup .link .text { letter-spacing: 1px; font-size: 14px; font-size: 0.875rem; font-weight: 900; }

.homeNews .spModePag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; visibility: hidden; }

.homeNews .spModePag .btnSec { width: 46px; height: 46px; }

.homeNews .spModePag .swiper-pagination { position: relative; margin-right: auto; z-index: 2; }

.homeNews .spModePag .swiper-pagination-bullet { background-color: #434343; width: 8px; height: 8px; margin-right: 15px; }

@media (max-width: 1024px) { .homeNews .homeNewsSwiper { width: 100%; margin-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; }
  .homeNews .newsGroup .list { width: 100%; margin-right: 0; } }

@media (max-width: 767px) { .homeNews { padding: 150px 0vw 150px; }
  .homeNews .newsTitleBox .title { font-size: 30px; font-size: 1.875rem; padding: 0; }
  .homeNews .newsTitleBox .moreSec { display: none; }
  .homeNews .newsGroup .link { display: none; }
  .homeNews .spModePag { opacity: 1; visibility: visible; } }

.broArea.show .infoFrame .price { opacity: 1; -webkit-transition: all 0.8s ease 0.5s; -moz-transition: all 0.8s ease 0.5s; -ms-transition: all 0.8s ease 0.5s; -o-transition: all 0.8s ease 0.5s; transition: all 0.8s ease 0.5s; }

.broArea.show .infoFrame .info { opacity: 1; -webkit-transition: all 0.8s ease 0.5s; -moz-transition: all 0.8s ease 0.5s; -ms-transition: all 0.8s ease 0.5s; -o-transition: all 0.8s ease 0.5s; transition: all 0.8s ease 0.5s; }

.broArea .infoFrame { letter-spacing: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.broArea .infoFrame .price { font-size: 30px; font-size: 1.875rem; font-weight: 900; line-height: 1.4; letter-spacing: 3px; text-align: center; opacity: 0; }

.broArea .infoFrame .info { font-size: 16px; font-size: 1rem; line-height: 1.4; text-align: center; width: 80%; opacity: 0; }

.broArea .title { font-size: 24px; font-size: 1.5rem; font-weight: 900; line-height: 1.4; }

.styleDisplayArea { width: 100%; position: fixed; left: 0; top: 0; z-index: 0; }

.styleDisplayArea.show .showDrum .imageBox:after { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 1.5s ease 0.5s; -moz-transition: all 1.5s ease 0.5s; -ms-transition: all 1.5s ease 0.5s; -o-transition: all 1.5s ease 0.5s; transition: all 1.5s ease 0.5s; }

.styleDisplayArea.show .title { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.styleDisplayArea.show .btnFrame .list { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.8s ease 1s; -moz-transition: all 0.8s ease 1s; -ms-transition: all 0.8s ease 1s; -o-transition: all 0.8s ease 1s; transition: all 0.8s ease 1s; }

.styleDisplayArea.show .btnFrame .list > * { opacity: 1; -webkit-transition: all 1s ease 1.7s; -moz-transition: all 1s ease 1.7s; -ms-transition: all 1s ease 1.7s; -o-transition: all 1s ease 1.7s; transition: all 1s ease 1.7s; }

.styleDisplayArea .left { width: 50%; height: 100vh; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 80px 6vw 0 6vw; }

.styleDisplayArea .box { margin-bottom: 25px; position: relative; overflow: hidden; }

.styleDisplayArea .title { text-align: center; -webkit-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); }

.styleDisplayArea .showDrum { max-width: 89%; margin: 0 auto; padding: 40px 0; }

.styleDisplayArea .showDrum .imageBox { position: relative; overflow: hidden; }

.styleDisplayArea .showDrum .imageBox:after { content: ''; display: block; background-color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.styleDisplayArea .showDrum .image { position: absolute; left: 0; top: 0; }

.styleDisplayArea .showDrum .base { position: relative; }

.styleDisplayArea .btnFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.styleDisplayArea .btnFrame .list { cursor: pointer; background-color: #f3f3f3; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; width: 80px; height: 80px; margin: 0 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; letter-spacing: 0.5px; font-size: 12px; font-size: 0.75rem; font-weight: 900; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

.styleDisplayArea .btnFrame .list > * { opacity: 0; }

.styleDisplayArea .btnFrame .list p { -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); }

.styleDisplayArea .btnFrame .list .icon { font-size: 16px; font-size: 1rem; margin-bottom: 5px; }

@media (max-width: 1024px) { .styleDisplayArea { z-index: 1; position: fixed; background-color: #fff; }
  .styleDisplayArea.shrink { z-index: 3; }
  .styleDisplayArea.shrinkNot { z-index: 1; }
  .styleDisplayArea .left { width: 100%; height: auto; padding: 3vh 6vw 0 6vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .styleDisplayArea .btnFrame { margin-bottom: 20px; }
  .styleDisplayArea .showDrum { width: 50%; padding: 20px 0; } }

@media (max-width: 767px) { .styleDisplayArea .left { height: 50vh; }
  .styleDisplayArea .title { font-size: 18px; font-size: 1.125rem; }
  .styleDisplayArea .box { margin-bottom: 15px; }
  .styleDisplayArea .infoFrame .price { font-size: 18px; font-size: 1.125rem; }
  .styleDisplayArea .btnFrame .list { width: 70px; height: 70px; margin: 0 10px; }
  .styleDisplayArea .showDrum { width: 50%; padding: 20px 0; } }

@media (max-width: 374px) { .styleDisplayArea .left { height: 55vh; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .styleDisplayArea .title { font-size: 16px; font-size: 1rem; }
  .styleDisplayArea .infoFrame .price { font-size: 16px; font-size: 1rem; }
  .styleDisplayArea .showDrum { padding: 10px 0; }
  .styleDisplayArea .btnFrame { margin-bottom: 10px; } }

.styleChooseArea { background-color: #f3f3f3; width: 50%; height: 100%; min-height: 100vh; margin-left: auto; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 80px 6vw 160px 6vw; position: relative; }

.styleChooseArea.show .title { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.styleChooseArea.show .orderFir { opacity: 1; }

.styleChooseArea .infoFrame { margin-bottom: 70px; }

.styleChooseArea .title { text-align: center; -webkit-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); }

.styleChooseArea .box { margin-bottom: 25px; position: relative; overflow: hidden; }

@media (max-width: 1700px) { .styleChooseArea { padding: 80px 2.5vw 80px 2.5vw; } }

@media (max-width: 1024px) { .styleChooseArea { padding: 10vh 5vw 15vh 5vw; width: 100%; z-index: 1; } }

@media (max-width: 767px) { .styleChooseArea { padding: 10vh 6vw 15vh 6vw; margin-top: 50vh; }
  .styleChooseArea .title { font-size: 18px; font-size: 1.125rem; }
  .styleChooseArea .infoFrame { margin-bottom: 40px; } }

@media (max-width: 374px) { .styleChooseArea { margin-top: 55vh; }
  .styleChooseArea .title { font-size: 16px; font-size: 1rem; } }

.styleComplex { background-color: #232323; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 1; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.styleComplex.show { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 1s ease 1s; -moz-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; -o-transition: all 1s ease 1s; transition: all 1s ease 1s; }

.styleComplex .order { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.styleComplex .list { color: #666; padding: 25px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.styleComplex .icon { color: #fff; margin-right: 12px; }

.styleComplex .text { font-size: 12px; font-size: 0.75rem; }

.styleComplex .priceNum { height: 0; opacity: 0; visibility: hidden; color: #fff; font-size: 18px; font-size: 1.125rem; letter-spacing: 1px; }

.styleComplex .spShowText { color: #666; font-size: 12px; font-size: 0.75rem; display: none; }

.styleComplex .spMask { display: none; }

@media (max-width: 1024px) { .styleComplex .list { padding: 17px 15px; }
  .styleComplex.scrollDown { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }
  .styleComplex.scrollUp { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; } }

@media (max-width: 767px) { .styleComplex { height: 65px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .styleComplex .spShow { width: 50%; text-align: center; }
  .styleComplex .order { background-color: #232323; width: auto; height: 100%; min-width: 50%; position: absolute; right: 0; top: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0 6vw; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .styleComplex .spNotShow { display: none !important; }
  .styleComplex .text { display: none; }
  .styleComplex .icon { margin-right: 0; }
  .styleComplex .priceNum { height: auto; opacity: 1; visibility: visible; }
  .styleComplex .listBox { height: 100%; position: relative; }
  .styleComplex .listBox.showMom .spMask { display: none; }
  .styleComplex .listBox.showMom .spShowText { opacity: 1; padding-left: 10px; -webkit-transition: all 0.5s ease 0.3s; -moz-transition: all 0.5s ease 0.3s; -ms-transition: all 0.5s ease 0.3s; -o-transition: all 0.5s ease 0.3s; transition: all 0.5s ease 0.3s; }
  .styleComplex .listBox.showMom .list { width: 150px; padding-left: 10px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
  .styleComplex .list { -webkit-box-sizing: border-box; box-sizing: border-box; width: 35px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; position: relative; z-index: 1; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
  .styleComplex .spShowText { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; right: 0; top: 0; width: calc(100% - 35px); height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
  .styleComplex .spMask { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; display: block; } }

.stylePriceList { color: #fff; background-color: rgba(0, 0, 0, 0.85); width: 50%; height: 100vh; padding: 8vh 0 15vh 0; position: fixed; left: 0; top: 0; letter-spacing: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 1; visibility: visible; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.stylePriceList.notOpen { opacity: 0; visibility: hidden; }

.stylePriceList.notOpen .priceBox { opacity: 0; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }

.stylePriceList.notOpen .artiTitle { opacity: 0; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }

.stylePriceList.notOpen .list { opacity: 0; -webkit-transition: opacity 0s ease !important; -o-transition: opacity 0s ease !important; transition: opacity 0s ease !important; }

.stylePriceList .priceListBox { width: 100%; max-width: 520px; margin: 0 auto; }

.stylePriceList .artiTitle { font-size: 30px; font-size: 1.875rem; line-height: 1.5; margin-bottom: 80px; -webkit-transition: all 0.5s ease 0.3s; -moz-transition: all 0.5s ease 0.3s; -ms-transition: all 0.5s ease 0.3s; -o-transition: all 0.5s ease 0.3s; transition: all 0.5s ease 0.3s; }

.stylePriceList .priceBox { height: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: solid 1px #fff; border-bottom: solid 1px #fff; -webkit-transition: all 0s ease 0.5s; -moz-transition: all 0s ease 0.5s; -ms-transition: all 0s ease 0.5s; -o-transition: all 0s ease 0.5s; transition: all 0s ease 0.5s; }

.stylePriceList .order { -webkit-box-sizing: border-box; box-sizing: border-box; }

.stylePriceList .list { -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: solid 1px rgba(255, 255, 255, 0.3); padding: 25px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.stylePriceList .list:last-child { border-bottom: none; }

.stylePriceList .list p { line-height: 1.5; }

.stylePriceList .list .title { margin-bottom: 5px; }

.stylePriceList .list .price { margin-left: auto; }

.stylePriceList .mobileShow { opacity: 0; visibility: hidden; width: 35px; height: 0; background-color: #000; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; }

@media (max-width: 1366px) { .stylePriceList { padding: 5vh 3vw 15vh 3vw; } }

@media (max-width: 1024px) { .stylePriceList { z-index: 2; width: 100%; padding: 6vh 0 15vh 0; }
  .stylePriceList .mobileShow { height: 35px; opacity: 1; visibility: visible; margin: 0 auto 8vh auto; }
  .stylePriceList .artiTitle { text-align: center; }
  .stylePriceList .priceListBox { width: 85.5%; } }

@media (max-width: 767px) { .stylePriceList .mobileShow { margin: 0 auto 5vh auto; }
  .stylePriceList .artiTitle { margin-bottom: 40px; }
  .stylePriceList .priceBox { height: 55vh; }
  .stylePriceList .list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .stylePriceList .list .desBox { margin-bottom: 20px; }
  .stylePriceList .list .price { margin-left: 0; } }

@media (max-width: 413px) { .stylePriceList .priceBox { height: 50vh; } }

@media (min-width: 1921px) { .stylePriceList .priceListBox { width: 25.5vw; max-width: none; } }

@media (max-height: 850px) and (min-width: 1024px) { .stylePriceList { padding: 5vh 0 15vh 0; }
  .stylePriceList .priceBox { height: 50vh; } }

@media (max-height: 700px) and (min-width: 1024px) { .stylePriceList .priceBox { height: 40vh; }
  .stylePriceList .artiTitle { margin-bottom: 40px; } }

@media (max-height: 560px) and (min-width: 1024px) { .stylePriceList .priceBox { height: 35vh; } }

.styleCallBtn { cursor: pointer; color: #fff; background-color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; width: 35px; height: 35px; position: fixed; left: 50%; top: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.styleCallBtn.notOpen .open { opacity: 1; }

.styleCallBtn.notOpen .close { opacity: 0; }

.styleCallBtn .open { opacity: 0; }

.styleCallBtn .close { opacity: 1; }

.styleCallBtn .icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

@media (max-width: 1024px) { .styleCallBtn { position: absolute; top: 0; z-index: 2; }
  .styleCallBtn.open { z-index: 1; } }

@media (max-width: 374px) { .styleCallBtn { top: 20px; } }

.styleChowder .orderFir { opacity: 0; border-top: solid 2px #000; }

.styleChowder .orderFir:last-child { border-bottom: solid 2px #000; }

.styleChowder .orderFir.isOpen .firFrame { border-bottom: solid 1px #000; }

.styleChowder .orderFir.isOpen .listBtn .up { opacity: 1; }

.styleChowder .orderFir.isOpen .listBtn .down { opacity: 0; }

.styleChowder .orderFir.floatPc .floatBox { position: fixed; top: 0; }

.styleChowder .orderFir.float .floatBox { width: 88%; position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important; border-bottom: solid 1px #000; }

.styleChowder .orderFir.float .firFrame { padding: 15px 0; }

.styleChowder .firTitleBox { background-color: #f3f3f3; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; }

.styleChowder .firTitleBox .icon { max-width: 20px; position: absolute; left: 0; top: calc(50% + 10px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.styleChowder .firTitleBox .icon img { width: auto; }

.styleChowder .firTitleBox .floatBox { background-color: #f3f3f3; width: 100%; padding: 0 30px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }

.styleChowder .firTitleBox .firFrame { letter-spacing: 1px; margin: 0 30px; padding: 50px 0 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.styleChowder .firTitleBox .firFrame.selected .subinfo .cancleBtn { opacity: 1; visibility: visible; }

.styleChowder .firTitleBox .firFrame .infoBox { width: 23vw; margin-right: 20px; }

.styleChowder .firTitleBox .firFrame .info { font-size: 18px; font-size: 1.125rem; line-height: 1.5; margin-bottom: 5px; }

.styleChowder .firTitleBox .firFrame .info .title { font-size: 18px; font-size: 1.125rem; text-align: left; }

.styleChowder .firTitleBox .firFrame .subinfo { font-size: 14px; font-size: 0.875rem; line-height: 1.5; position: relative; }

.styleChowder .firTitleBox .firFrame .subinfo .titleSec { font-weight: 900; }

.styleChowder .firTitleBox .firFrame .subinfo .cancleBtn { cursor: pointer; margin-left: 30px; opacity: 0; visibility: hidden; }

.styleChowder .firTitleBox .firFrame .price { font-weight: 900; margin-left: auto; }

.styleChowder .firTitleBox .listBtn { cursor: pointer; border: solid 2px #000; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; width: 30px; height: 30px; position: absolute; right: 0; top: calc(50% + 10px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.styleChowder .firTitleBox .listBtn .icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.styleChowder .firTitleBox .listBtn .up { opacity: 0; }

.styleChowder .firTitleBox .listBtn .down { opacity: 1; }

.styleChowder .floatBox { position: relative; top: 0; left: 0; }

.styleChowder .listFir { padding: 80px 0 0 0; margin: 0 60px; letter-spacing: 0.5px; border-bottom: solid 1px #000; display: none; }

.styleChowder .listFir:last-child { border-bottom: none; }

.styleChowder .listFir .box { margin-bottom: 40px; }

.styleChowder .listFir .info { color: #666; font-size: 14px; font-size: 0.875rem; line-height: 1.5; }

.styleChowder .listFir .series { font-size: 16px; font-size: 1rem; font-weight: 900; line-height: 1.5; margin-bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.styleChowder .listFir .series .line { background-color: #000; display: block; width: 45px; height: 5px; margin-right: 16px; }

.styleChowder .listFir .series .num { margin-right: 4px; }

.styleChowder .listSec { cursor: pointer; padding: 45px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: solid 1px #dadada; }

.styleChowder .listSec.chosen .tickBox { color: #000; }

.styleChowder .listSec .itemImg { margin-right: 40px; }

.styleChowder .listSec .imgFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }

.styleChowder .listSec .imgFrame:hover .hoverBox { opacity: 1; }

.styleChowder .listSec .imgFrame img { width: auto; }

.styleChowder .listSec .imgFrame .hoverBox { background-color: rgba(255, 255, 255, 0.5); width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.styleChowder .listSec .imgFrame .hoverBox .icon:before { font-weight: 900; }

.styleChowder .listSec .textBox { line-height: 1.5; width: 14vw; margin-bottom: 0; }

.styleChowder .listSec .textBox .title { text-align: left; margin-bottom: 8px; font-size: 16px; font-size: 1rem; }

.styleChowder .listSec .textBox .info { color: #000; font-size: 12px; font-size: 0.75rem; }

.styleChowder .listSec .priceBox { font-size: 16px; font-size: 1rem; line-height: 1.5; margin-left: auto; }

.styleChowder .listSec .priceBox .price { font-weight: 900; white-space: pre; }

.styleChowder .listSec .priceBox .mode { font-size: 12px; font-size: 0.75rem; display: block; text-align: right; }

.styleChowder .listSec .tickBox { color: #ccc; padding: 0 18px; margin-left: auto; }

.styleChowder .innerBox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.styleChowder .styleBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.styleChowder .styleA .styleBox { width: 80%; }

.styleChowder .styleA .imgFrame { max-width: 80px; }

.styleChowder .styleB .styleBox { width: 21vw; margin-right: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.styleChowder .styleB .imgFrame { margin-bottom: 30px; }

.styleChowder .styleB .imgFrame .logo { max-width: 80px; max-height: 40px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.styleChowder .styleB .kasten { display: -webkit-box; display: -ms-flexbox; display: flex; }

.styleChowder .styleB .textBox { width: 48%; }

.styleChowder .styleB .uploadBox { margin-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.styleChowder .styleC .styleBox { width: 80%; }

.styleChowder .styleC .imgFrame { max-width: 80px; }

.styleChowder .styleD .styleBox { width: 65%; }

.styleChowder .styleD .imgFrame { max-width: 150px; }

.styleChowder .styleE .styleBox { width: 25vw; }

.styleChowder .styleE .dragLogo { position: absolute; left: 0; top: 0; }

.styleChowder .styleE .djLogo { max-width: 30px; max-height: 30px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.styleChowder .styleE .cusLogo { max-width: 60px; max-height: 60px; }

.styleChowder .styleE .imgFrame { overflow: hidden; width: 100%; max-width: 150px; margin-right: 40px; }

.styleChowder .styleE .textBox { width: 100%; margin-bottom: 20px; }

.styleChowder .styleE .kasten { width: 50%; }

@media (max-width: 1500px) { .styleChowder .styleE .styleBox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .styleChowder .styleE .imgFrame { margin-bottom: 20px; }
  .styleChowder .styleE .kasten { width: 100%; } }

@media (max-width: 1366px) { .styleChowder .firTitleBox .firFrame { margin: 0 15px; }
  .styleChowder .firTitleBox .firFrame .info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .styleChowder .firTitleBox .firFrame .subinfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .styleChowder .firTitleBox .firFrame .subinfo .cancleBtn { position: absolute; right: 50%; top: 0; padding: 5px; }
  .styleChowder .listFir { margin: 0 45px; }
  .styleChowder .styleA .styleBox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .styleChowder .styleA .itemImg { margin-right: 20px; }
  .styleChowder .styleA .textBox { width: 100%; margin-bottom: 20px; }
  .styleChowder .styleA .priceBox { margin: 0; }
  .styleChowder .styleB .kasten { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .styleChowder .styleB .uploadBox { margin-bottom: 20px; }
  .styleChowder .styleB .textBox { width: 100%; }
  .styleChowder .styleC .styleBox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .styleChowder .styleC .itemImg { margin-right: 20px; }
  .styleChowder .styleC .textBox { width: 100%; margin-bottom: 20px; }
  .styleChowder .styleC .priceBox { margin: 0; }
  .styleChowder .styleD .styleBox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .styleChowder .styleD .textBox { width: 100%; margin-bottom: 20px; }
  .styleChowder .styleD .priceBox { margin: 0; } }

@media (max-width: 1200px) { .styleChowder .firTitleBox .firFrame .info { font-size: 16px; font-size: 1rem; }
  .styleChowder .firTitleBox .firFrame .info .title { font-size: 16px; font-size: 1rem; }
  .styleChowder .firTitleBox .firFrame .infoBox { width: 20vw; }
  .styleChowder .firTitleBox .firFrame .subinfo .cancleBtn { right: 35%; } }

@media (max-width: 1024px) { .styleChowder .styleA .styleBox { width: 50vw; }
  .styleChowder .styleB .styleBox { width: 50vw; }
  .styleChowder .styleB .kasten { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
  .styleChowder .styleB .listSec .imgFrame img { height: 50px; }
  .styleChowder .styleB .innerBox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .styleChowder .styleB .innerBox .priceBox { margin-left: 0; }
  .styleChowder .styleC .styleBox { width: 50vw; }
  .styleChowder .styleE .styleBox { width: 50vw; }
  .styleChowder .styleE .kasten { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .styleChowder .styleE .kasten .uploadBox { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; margin-right: 20px; }
  .styleChowder .styleE .kasten .textBox { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .styleChowder .styleE .innerBox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .styleChowder .styleE .innerBox .priceBox { margin-left: 0; } }

@media (max-width: 767px) { .styleChowder .orderFir.isOpen .firTitleBox { border-bottom: solid 1px #000; }
  .styleChowder .orderFir.isOpen .firFrame { border-bottom: none; }
  .styleChowder .firTitleBox .icon { top: 30px; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
  .styleChowder .firTitleBox .firFrame { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 15px 0; }
  .styleChowder .firTitleBox .firFrame .info { margin-bottom: 10px; }
  .styleChowder .firTitleBox .firFrame .infoBox { width: 60vw; margin-bottom: 10px; }
  .styleChowder .firTitleBox .firFrame .price { margin-left: 0; }
  .styleChowder .listFir { margin: 0; }
  .styleChowder .styleB .styleBox { width: 100%; margin-bottom: 20px; }
  .styleChowder .styleB .styleBox .imgFrame img { height: 85px; }
  .styleChowder .listSec .tickBox { padding: 0 10px 0 15px; } }

.styleAAjax { background-color: rgba(0, 0, 0, 0.9); overflow-y: scroll; overflow-x: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }

.styleAAjax.open { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.styleAAjax.open .for_scroll { -webkit-transform: translateY(0vh); -ms-transform: translateY(0vh); transform: translateY(0vh); -webkit-transition: all 0.8s ease 0.4s; -moz-transition: all 0.8s ease 0.4s; -ms-transition: all 0.8s ease 0.4s; -o-transition: all 0.8s ease 0.4s; transition: all 0.8s ease 0.4s; }

.styleAAjax.open .title { opacity: 1; -webkit-transition: all 0.7s ease 1s; -moz-transition: all 0.7s ease 1s; -ms-transition: all 0.7s ease 1s; -o-transition: all 0.7s ease 1s; transition: all 0.7s ease 1s; }

.styleAAjax.open .ajax_close { opacity: 1; -webkit-transition: all 0.7s ease 1s; -moz-transition: all 0.7s ease 1s; -ms-transition: all 0.7s ease 1s; -o-transition: all 0.7s ease 1s; transition: all 0.7s ease 1s; }

.styleAAjax.open .imageArea .imageAreaWrapper { opacity: 1; -webkit-transform: translate3d(0px, 0%, 0px) !important; transform: translate3d(0px, 0%, 0px) !important; -webkit-transition: all 1.2s; -o-transition: all 1.2s; transition: all 1.2s; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); -o-transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); }

.styleAAjax.open .informationArea { opacity: 1; -webkit-transition: all 1s ease 1.7s; -moz-transition: all 1s ease 1.7s; -ms-transition: all 1s ease 1.7s; -o-transition: all 1s ease 1.7s; transition: all 1s ease 1.7s; }

.styleAAjax.close { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s; }

.styleAAjax.close .for_scroll { -webkit-transform: translateY(100vh); -ms-transform: translateY(100vh); transform: translateY(100vh); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); -o-transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); }

.styleAAjax .for_scroll { -webkit-transform: translateY(100vh); -ms-transform: translateY(100vh); transform: translateY(100vh); }

.styleAAjax .ajax_close { border: solid 2px #000; border-radius: 50%; width: 45px; height: 45px; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); opacity: 0; }

.styleAAjax .innerFrame { background-color: #fff; width: 100%; max-width: 920px; margin: 0 auto; padding: 80px 20px; min-height: 100%; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }

.styleAAjax .title { font-size: 24px; font-size: 1.5rem; font-weight: 900; line-height: 1.5; text-align: center; padding: 0 20px; letter-spacing: 1px; margin-bottom: 70px; opacity: 0; }

.styleAAjax .imageArea { width: 82%; margin: 0 auto 95px auto; overflow: hidden; }

.styleAAjax .imageArea .imageAreaWrapper { margin-bottom: 45px; opacity: 0; -webkit-transform: translate3d(0px, 100%, 0px) !important; transform: translate3d(0px, 100%, 0px) !important; }

.styleAAjax .imageArea .imagePag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.styleAAjax .imageArea .imagePag .swiper-pagination-bullet-active { background-color: #000; }

.styleAAjax .imgFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.styleAAjax .imgFrame img { width: auto; margin: 0 auto; }

.styleAAjax .informationArea { letter-spacing: 0.5px; width: 68%; margin: 0 auto; opacity: 0; }

.styleAAjax .informationArea .infoSec { padding: 40px 0; border-bottom: solid 1px #ccc; -webkit-box-sizing: border-box; box-sizing: border-box; }

.styleAAjax .informationArea .titleName { font-size: 18px; font-size: 1.125rem; font-weight: 900; line-height: 1.5; margin: 0 0 25px 0; }

.styleAAjax .informationArea .order.dot .num { background-color: #000; border-radius: 50%; width: 5px; height: 5px; }

.styleAAjax .informationArea .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 900; margin-bottom: 5px; }

.styleAAjax .informationArea .text { font-size: 14px; font-size: 0.875rem; line-height: 1.5; }

.styleAAjax .informationArea .num { margin-right: 16px; display: block; }

@media (max-width: 767px) { .styleAAjax .ajax_close { margin: 0 auto; margin-bottom: 30px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  .styleAAjax .imageArea { width: 100%; margin: 0 auto 5vh auto; }
  .styleAAjax .informationArea { width: 80%; } }

@media (min-width: 1920px) { .styleAAjax .innerFrame { width: 50vw; } }

.listProductWork { -webkit-transform: translateY(100vh); -ms-transform: translateY(100vh); transform: translateY(100vh); }

.listProductWork.show { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.listProductWork.show .directorBox { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); opacity: 1; -webkit-transition: opacity .8s ease 1s, -webkit-transform .8s ease 1s; transition: opacity .8s ease 1s, -webkit-transform .8s ease 1s; -o-transition: transform .8s ease 1s, opacity .8s ease 1s; transition: transform .8s ease 1s, opacity .8s ease 1s; transition: transform .8s ease 1s, opacity .8s ease 1s, -webkit-transform .8s ease 1s; }

.listProductWork.show .contentHeadBox:after { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 1s ease 1.5s; -moz-transition: all 1s ease 1.5s; -ms-transition: all 1s ease 1.5s; -o-transition: all 1s ease 1.5s; transition: all 1s ease 1.5s; }

.listProductWork.show .productList { opacity: 1; -webkit-transition: all 1s ease 1.8s; -moz-transition: all 1s ease 1.8s; -ms-transition: all 1s ease 1.8s; -o-transition: all 1s ease 1.8s; transition: all 1s ease 1.8s; }

.listProductWork.show .item.show { opacity: 1; -webkit-transition: all 1s ease 0.3s; -moz-transition: all 1s ease 0.3s; -ms-transition: all 1s ease 0.3s; -o-transition: all 1s ease 0.3s; transition: all 1s ease 0.3s; }

.listProductWork .content { background-color: #f3f3f3; width: 75%; padding: 145px 0px; }

.listProductWork .directorBox { display: -webkit-box; display: -ms-flexbox; display: flex; width: 75%; position: fixed; left: 0; top: 0; z-index: 1; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; }

.listProductWork .directorBox .spReturnBtn { color: #fff; background-color: #000; width: 65px; height: 65px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: none; }

.listProductWork .directorBox .selectBox { width: 100%; }

.listProductWork .directorBox .selectHead { display: none; }

.listProductWork .directorBox .selectBody { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; top: 0; }

.listProductWork .directorBox .callRightBtn { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.listProductWork .directorBox .callRightBtn .lineBox { width: 50%; }

.listProductWork .directorBox .callRightBtn .line { display: block; background-color: #fff; width: 100%; height: 2px; margin-bottom: 5px; }

.listProductWork .directorBox .callRightBtn .line:last-child { margin-bottom: 0; }

.listProductWork .directorBox .link { background-color: #000; width: 33.33%; height: 65px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-right: solid 1px #333333; -webkit-box-sizing: border-box; box-sizing: border-box; }

.listProductWork .directorBox .link:hover { background-color: #000; }

.listProductWork .directorBox .link:last-child { border-right: none; }

.listProductWork .directorBox .txt { color: #fff; font-size: 12px; font-size: 0.75rem; }

.listProductWork .contentHeadBox { display: -webkit-box; display: -ms-flexbox; display: flex; width: 75%; margin: 0 auto 120px auto; position: relative; overflow: hidden; }

.listProductWork .contentHeadBox:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #f3f3f3; }

.listProductWork .contentHeadBox .backward { margin-left: auto; }

.listProductWork .titleBox { letter-spacing: 0.5px; width: calc(100% - 46px); padding-right: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.listProductWork .titleBox .title { font-size: 24px; font-size: 1.5rem; font-weight: 900; line-height: 1.4; margin-bottom: 30px; }

.listProductWork .titleBox .subTitle { font-size: 14px; font-size: 0.875rem; line-height: 1.6; }

.listProductWork .productList { width: 75%; letter-spacing: 0.5px; margin: 0 auto; opacity: 0; }

.listProductWork .productList .work1 { width: 11.1%; }

.listProductWork .productList .work2 { width: 55.5%; }

.listProductWork .productList .work3 { width: 22.3%; }

.listProductWork .productList .work4 { width: 11.1%; }

.listProductWork .itemList { -webkit-box-sizing: border-box; box-sizing: border-box; border-top: solid 4px #000; border-bottom: solid 4px #000; }

.listProductWork .item { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: solid 1px #000; padding: 30px 0 50px 0; opacity: 0; }

.listProductWork .item:last-child { border-bottom: none; }

.listProductWork .imgFrame .imgBox { border-radius: 50%; overflow: hidden; width: 75%; }

.listProductWork .infoFrame { padding-right: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.listProductWork .infoFrame .objName { font-size: 20px; font-size: 1.25rem; font-weight: 900; line-height: 1.4; margin-bottom: 8px; }

.listProductWork .infoFrame .objSerial { font-size: 14px; font-size: 0.875rem; line-height: 1.6; margin-bottom: 10px; }

.listProductWork .infoFrame .list { display: -webkit-box; display: -ms-flexbox; display: flex; }

.listProductWork .infoFrame .list .title { font-size: 15px; font-size: 0.9375rem; font-weight: 900; line-height: 1.4; width: 50%; margin-right: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 0; border-bottom: solid 1px #c9c9c9; }

.listProductWork .infoFrame .detailBox { width: 50%; padding: 10px 0; border-bottom: solid 1px #c9c9c9; }

.listProductWork .infoFrame .detailBox .detail { font-size: 14px; font-size: 0.875rem; line-height: 1.4; }

.listProductWork .infoFrame .list:last-child .title { border-bottom: none; }

.listProductWork .infoFrame .list:last-child .detailBox { border-bottom: none; }

.listProductWork .priceFrame { font-size: 20px; font-size: 1.25rem; font-weight: 900; padding-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.listProductWork .priceFrame .money { line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.listProductWork .priceFrame .dolor { display: block; margin-right: 2px; }

.listProductWork .priceFrame .sign { display: block; margin: 0 3px; }

.listProductWork .priceFrame .num { display: block; }

.listProductWork .ctrlFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.listProductWork .ctrlFrame .ctrlBtn { color: #c2c2c2; border: solid 2px #c2c2c2; border-radius: 50%; width: 35px; height: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 18px; }

.listProductWork .ctrlFrame .ctrlBtn:last-child { margin-right: 0; }

.listProductWork .ctrlFrame .ctrlBtn:hover { color: #000; border-color: #000; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.listProductWork .formList { display: -webkit-box; display: -ms-flexbox; display: flex; }

.listProductWork .formList .text { font-size: 12px; font-size: 0.75rem; margin-bottom: 15px; line-height: 1.4; }

@media (min-width: 1921px) { .listProductWork .contentHeadBox { width: 75%; max-width: none; }
  .listProductWork .productList { width: 75%; max-width: none; } }

@media (max-width: 1800px) { .listProductWork .contentHeadBox { width: 80%; }
  .listProductWork .productList { width: 80%; }
  .listProductWork .productList .work2 { width: 50.5%; }
  .listProductWork .productList .work3 { width: 27.3%; } }

@media (max-width: 1600px) { .listProductWork .contentHeadBox { width: 90%; }
  .listProductWork .productList { width: 90%; } }

@media (max-width: 1200px) { .listProductWork .productList .work1 { width: 15.1%; } }

@media (max-width: 1366px) { .listProductWork .productList .work4 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .listProductWork .ctrlFrame .ctrlBtn { margin-right: 0; margin-bottom: 18px; } }

@media (max-width: 1024px) { .listProductWork .content { width: 100%; }
  .listProductWork .directorBox { width: 100%; }
  .listProductWork .directorBox .selectBox { width: 90%; }
  .listProductWork .directorBox .callRightBtn { background-color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; width: 10%; }
  .listProductWork .formList { display: none; }
  .listProductWork .productList .item { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 0; }
  .listProductWork .productList .work1 { width: 25%; }
  .listProductWork .productList .work2 { width: 75%; margin-bottom: 15px; padding: 0; }
  .listProductWork .productList .work3 { width: 100%; margin-bottom: 15px; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .listProductWork .productList .work4 { width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
  .listProductWork .ctrlFrame .ctrlBtn { margin-right: 18px; margin-bottom: 0; } }

@media (max-width: 767px) { .listProductWork .content { padding: 100px 0px 145px 0; }
  .listProductWork .contentHeadBox { width: 80%; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto 60px auto; }
  .listProductWork .contentHeadBox .backward { display: none; }
  .listProductWork .titleBox { padding-right: 0; width: 100%; }
  .listProductWork .titleBox .title { text-align: center; }
  .listProductWork .productList .work1 { width: 100%; }
  .listProductWork .productList .work1 .imgBox { width: 90px; margin: 0 auto; }
  .listProductWork .productList .work2 { width: 100%; }
  .listProductWork .productList .work3 { margin-bottom: 30px; }
  .listProductWork .infoFrame .objName { text-align: center; }
  .listProductWork .infoFrame .objSerial { text-align: center; margin-bottom: 30px; }
  .listProductWork .infoFrame .list:last-child .title { border-bottom: solid 1px #c9c9c9; }
  .listProductWork .infoFrame .list:last-child .detailBox { border-bottom: solid 1px #c9c9c9; }
  .listProductWork .directorBox.active .selectBox { width: calc(100% - 130px); height: 65px; }
  .listProductWork .directorBox.active .selectHead { color: #fff; background-color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; }
  .listProductWork .directorBox.active .selectBody { position: absolute; top: 100%; display: none; width: 100vw; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
  .listProductWork .directorBox.active .link { width: 100%; border: none; border-top: solid 1px #333; }
  .listProductWork .directorBox.active .callRightBtn { width: 65px; }
  .listProductWork .directorBox.active .spReturnBtn { display: -webkit-box; display: -ms-flexbox; display: flex; } }

.listProductRight { background-color: #fff; width: 25%; position: fixed; right: 0; top: 0; height: 100%; padding: 75px 3vw; -webkit-box-sizing: border-box; box-sizing: border-box; }

.listProductRight.show .block { opacity: 1; }

.listProductRight .ps__thumb-y { opacity: 0; }

.listProductRight .block { letter-spacing: 0.5px; padding: 0 7%; border-bottom: solid 1px #000; opacity: 0; }

.listProductRight .block:nth-child(2) { -webkit-transition: all 0.5s ease 0.8s; -moz-transition: all 0.5s ease 0.8s; -ms-transition: all 0.5s ease 0.8s; -o-transition: all 0.5s ease 0.8s; transition: all 0.5s ease 0.8s; }

.listProductRight .block:nth-child(3) { -webkit-transition: all 0.5s ease 1.1s; -moz-transition: all 0.5s ease 1.1s; -ms-transition: all 0.5s ease 1.1s; -o-transition: all 0.5s ease 1.1s; transition: all 0.5s ease 1.1s; }

.listProductRight .block:nth-child(4) { -webkit-transition: all 0.5s ease 1.4s; -moz-transition: all 0.5s ease 1.4s; -ms-transition: all 0.5s ease 1.4s; -o-transition: all 0.5s ease 1.4s; transition: all 0.5s ease 1.4s; }

.listProductRight .block:nth-child(5) { -webkit-transition: all 0.5s ease 1.7s; -moz-transition: all 0.5s ease 1.7s; -ms-transition: all 0.5s ease 1.7s; -o-transition: all 0.5s ease 1.7s; transition: all 0.5s ease 1.7s; }

.listProductRight .block:last-child { border-bottom: none; }

.listProductRight .block.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.listProductRight .block .title { font-size: 24px; font-size: 1.5rem; font-weight: 900; text-align: center; line-height: 1.4; margin-bottom: 15px; }

.listProductRight .block .backward { width: 45px; height: 45px; margin-left: auto; }

.listProductRight .priceBox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.listProductRight .priceBox .money { font-size: 15px; font-size: 0.9375rem; font-weight: 900; line-height: 1.5; width: 20%; margin-right: auto; -ms-flex-item-align: end; align-self: flex-end; }

.listProductRight .priceBox .price { font-size: 20px; font-size: 1.25rem; }

.listProductRight .listBox .list { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: solid 1px #d3d3d3; line-height: 1.5; margin-top: 10px; }

.listProductRight .listBox .list:last-child { border-bottom: none; }

.listProductRight .listBox .name { font-size: 15px; font-size: 0.9375rem; font-weight: 900; }

.listProductRight .listBox .num { font-weight: 900; margin-left: auto; }

.listProductRight .contactBtn { cursor: pointer; color: #fff; background-color: #000; font-size: 12px; font-size: 0.75rem; font-weight: 900; padding: 26px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.listProductRight .spCloseBtn { cursor: pointer; display: none; border-radius: 50%; border: solid 2px #000; width: 46px; height: 46px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; right: 20px; top: 20px; }

.listProductRight .spCloseBtn .icon { font-size: 35px; font-size: 2.1875rem; }

.listProductRight .priceArea { padding-bottom: 60px; }

.listProductRight .listArea { padding: 60px 7%; }

.listProductRight .contactArea { padding: 60px 7%; }

.listProductRight .contactArea .info { font-size: 14px; font-size: 0.875rem; line-height: 1.5; margin-bottom: 25px; }

.listProductRight .backwardArea { padding-top: 60px; border-bottom: none; }

.listProductRight .backwardArea .backward .icon { font-size: 35px; font-size: 2.1875rem; }

.listProductRight .backwardArea .title { width: calc(100% - 50px); text-align: left; margin-bottom: 0; }

@media (max-width: 1024px) { .listProductRight { width: 38%; min-width: 380px; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
  .listProductRight.slideShow { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); }
  .listProductRight .spCloseBtn { display: -webkit-box; display: -ms-flexbox; display: flex; } }

@media (max-width: 414px) { .listProductRight { width: 100%; min-width: auto; } }

.listContactFrame { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: -1; }

.listContactFrame.open { z-index: 0; }

.listContactFrame.open:after { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.listContactFrame.open .content { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; -webkit-transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); -o-transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); transition-timing-function: cubic-bezier(0.15, 0.4, 0.27, 1.41); }

.listContactFrame.close:after { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.5s ease 0.6s; -moz-transition: all 0.5s ease 0.6s; -ms-transition: all 0.5s ease 0.6s; -o-transition: all 0.5s ease 0.6s; transition: all 0.5s ease 0.6s; }

.listContactFrame.close .content { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; }

.listContactFrame:after { content: ''; display: block; background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }

.listContactFrame .content { background-color: #fff; width: 100%; height: 100%; max-width: 900px; min-height: 100%; margin: 0 auto; padding: 8vh 0; letter-spacing: 0.5px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.listContactFrame .backward { cursor: pointer; width: 46px; height: 46px; margin: 0 auto 60px auto; }

.listContactFrame .title { font-size: 24px; font-size: 1.5rem; font-weight: 900; line-height: 1.4; text-align: center; width: 50%; margin: 0 auto 30px auto; }

.listContactFrame .subTitle { font-size: 14px; font-size: 0.875rem; line-height: 1.6; text-align: center; width: 50%; margin: 0 auto 50px auto; }

.listContactFrame .ctrlBtnBox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.listContactFrame .ctrlBtnBox .btn { cursor: pointer; color: #fff; background-color: #000; border: none; width: 36%; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-right: solid 1px #333; }

.listContactFrame .ctrlBtnBox .btn:last-child { border-right: none; }

.listContactFrame .tabForm { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 70%; margin: 0 auto; }

.listContactFrame .field { background-color: #f3f3f3; border: solid 1px #fff; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.listContactFrame .field .rowBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.listContactFrame .field .text { font-size: 12px; font-size: 0.75rem; font-weight: 900; width: 100px; padding-left: 25px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.listContactFrame .field .input { height: 100%; width: calc(100% - 100px); padding-right: 20px; border: none; background-color: rgba(255, 255, 255, 0); }

.listContactFrame .half { width: 50%; }

.listContactFrame .chrisSelect { width: calc(100% - 100px); height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.listContactFrame .chrisSelect .dropShow { width: 100%; height: inherit; padding: 0 10px; }

.listContactFrame .chrisSelect .dropShow .character { font-size: 12px; font-size: 0.75rem; }

.listContactFrame .chrisSelect .dropList { background-color: #d8d8d8; border: none; overflow: hidden; height: 20vh; }

.listContactFrame .chrisSelect .dropList .list { border-bottom: none; }

.listContactFrame .chrisSelect .dropList .list:hover { color: #fff; background-color: #717171; }

.listContactFrame .chrisSelect .dropList .character { font-size: 12px; font-size: 0.75rem; }

.listContactFrame .nation .text { width: 130px; }

.listContactFrame .textArea { height: 150px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 20px 10px 20px 0; margin-bottom: 60px; }

.listContactFrame .textArea .textarea { height: 100%; width: calc(100% - 100px); border: none; background-color: rgba(255, 255, 255, 0); }

.listContactFrame .gender .rowBox { width: calc(100% - 100px); height: 100%; }

.listContactFrame .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding-left: 18px; width: 50%; height: inherit; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.listContactFrame .container input { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }

.listContactFrame .container .mark { position: absolute; top: 50%; left: 0; height: 8px; width: 8px; border-radius: 50%; border: solid 1px #333; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.listContactFrame .container:hover input ~ .mark { background-color: #ccc; }

.listContactFrame .container input:checked ~ .mark { background-color: #333; }

@media (max-width: 1024px) { .listContactFrame .tabForm { width: 80%; } }

@media (max-width: 768px) { .listContactFrame .tabForm { width: 90%; } }

@media (max-width: 767px) { .listContactFrame.open { overflow-y: scroll; }
  .listContactFrame .content { padding: 8vh 0 14vh 0; } }

@media (max-width: 600px) { .listContactFrame .title { width: 80%; }
  .listContactFrame .subTitle { width: 80%; }
  .listContactFrame .half { width: 100%; }
  .listContactFrame .ctrlBtnBox .btn { width: 50%; } }

@media (max-height: 667px) { .listContactFrame .chrisSelect .dropList { height: 30vh; } }

.product[data-page=index] .backToTopBtn { margin: 0 auto 100px auto; opacity: 0; }

.product[data-page=index] .backToTopBtn.show { opacity: 1; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }

.productImageWall { -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 29vh; margin: 0 0 30px 0; }

.productImageWall .show .eva:after { -webkit-transform: translateY(110%); -ms-transform: translateY(110%); transform: translateY(110%); -webkit-transition: -webkit-transform 1s cubic-bezier(0.98, 0, 0.42, 1); transition: -webkit-transform 1s cubic-bezier(0.98, 0, 0.42, 1); -o-transition: transform 1s cubic-bezier(0.98, 0, 0.42, 1); transition: transform 1s cubic-bezier(0.98, 0, 0.42, 1); transition: transform 1s cubic-bezier(0.98, 0, 0.42, 1), -webkit-transform 1s cubic-bezier(0.98, 0, 0.42, 1); }

.productImageWall .show .txtBox { opacity: 1; -webkit-transition: opacity .7s ease .8s; -o-transition: opacity .7s ease .8s; transition: opacity .7s ease .8s; }

.productImageWall .show .titleBox { opacity: 1; -webkit-transition: opacity 1.2s ease .6s; -o-transition: opacity 1.2s ease .6s; transition: opacity 1.2s ease .6s; }

.productImageWall .eva { width: 100%; position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; }

.productImageWall .eva:after { content: ''; display: block; background-color: #fff; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.productImageWall .eva:hover .hoverArea { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); visibility: visible; opacity: 1; -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

.productImageWall .eva:hover .hoverArea .title { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform .8s ease .4s; transition: -webkit-transform .8s ease .4s; -o-transition: transform .8s ease .4s; transition: transform .8s ease .4s; transition: transform .8s ease .4s, -webkit-transform .8s ease .4s; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; -webkit-box-orient: vertical; }

.productImageWall .eva:hover .hoverArea .info { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform .8s ease .6s; transition: -webkit-transform .8s ease .6s; -o-transition: transform .8s ease .6s; transition: transform .8s ease .6s; transition: transform .8s ease .6s, -webkit-transform .8s ease .6s; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; -webkit-box-orient: vertical; }

.productImageWall .eva:hover .hoverArea .icon { opacity: 1; -webkit-transition: opacity .8s ease .8s; -o-transition: opacity .8s ease .8s; transition: opacity .8s ease .8s; }

.productImageWall .eva:hover .hoverArea .moreBtn { opacity: 1; -webkit-transition: opacity .8s ease .9s; -o-transition: opacity .8s ease .9s; transition: opacity .8s ease .9s; }

.productImageWall .eva:hover .hoverArea .moreBtn .line { width: 100%; left: 0; right: 0; -webkit-transition: all .8s ease 1s; -o-transition: all .8s ease 1s; transition: all .8s ease 1s; }

.productImageWall .hoverArea { text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: 0.5px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 13% 17%; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); visibility: hidden; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: visibility 0s ease .8s, opacity 0s ease .8s, -webkit-transform .5s ease .2s; transition: visibility 0s ease .8s, opacity 0s ease .8s, -webkit-transform .5s ease .2s; -o-transition: transform .5s ease .2s, visibility 0s ease .8s, opacity 0s ease .8s; transition: transform .5s ease .2s, visibility 0s ease .8s, opacity 0s ease .8s; transition: transform .5s ease .2s, visibility 0s ease .8s, opacity 0s ease .8s, -webkit-transform .5s ease .2s; }

.productImageWall .hoverArea .frame { overflow: hidden; }

.productImageWall .hoverArea .title { font-size: 36px; font-size: 2.25rem; line-height: 1.4; margin-bottom: 15px; -webkit-transform: translateY(130%); -ms-transform: translateY(130%); transform: translateY(130%); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; }

.productImageWall .hoverArea .info { font-size: 14px; font-size: 0.875rem; line-height: 1.6; -webkit-transform: translateY(110%); -ms-transform: translateY(110%); transform: translateY(110%); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; }

.productImageWall .hoverArea .icon { max-width: 130px; width: auto; margin: 0 auto 0 auto; -ms-flex-item-align: center; align-self: center; opacity: 0; -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

.productImageWall .hoverArea .moreBtn { color: #fff0ab; font-size: 14px; font-size: 0.875rem; font-weight: 900; padding: 10px 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-item-align: center; align-self: center; position: relative; opacity: 0; -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

.productImageWall .hoverArea .moreBtn .line { display: block; width: 0; height: 4px; background-color: #000; position: absolute; left: 50%; bottom: 0; }

.productImageWall .grid-item { width: 50%; }

.productImageWall .wa .imgFrame { width: 84%; }

.productImageWall .wb .imgFrame { width: 92%; }

.productImageWall .wc .imgFrame { width: 100%; }

.productImageWall .wallFrame { width: 84.40vw; margin: 0 auto; }

.productImageWall .titleBox { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 4.5% 0 9%; margin: 0 0 100px 0; letter-spacing: 0.5px; opacity: 0; }

.productImageWall .titleBox .title { font-size: 48px; font-size: 3rem; font-weight: 900; line-height: 1.4; }

.productImageWall .titleBox .info { line-height: 1.6; }

.productImageWall .picBox { width: 50%; padding: 0 30px; margin: 0 0 70px 0; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; }

.productImageWall .picBox:nth-child(2) { margin-top: 60px; }

.productImageWall .imgFrame { position: relative; }

.productImageWall .txtBox { position: absolute; top: 60px; left: 60px; letter-spacing: 0.5px; width: 60%; opacity: 0; }

.productImageWall .txtBox .title { font-size: 30px; font-size: 1.875rem; line-height: 1.4; margin-bottom: 12px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; -webkit-box-orient: vertical; }

.productImageWall .txtBox .subTitle { font-size: 18px; font-size: 1.125rem; line-height: 1.6; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; -webkit-box-orient: vertical; }

.productImageWall .fLeft { float: left; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.productImageWall .fLeft .eva { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.productImageWall .fLeft .txtBox { text-align: right; left: auto; right: 60px; }

.productImageWall .fRight { float: right; }

@media (max-width: 1600px) { .productImageWall .wallFrame { width: 88.40vw; }
  .productImageWall .hoverArea { padding: 8% 10%; } }

@media (max-width: 1400px) { .productImageWall .wallFrame { width: 92.40vw; }
  .productImageWall .hoverArea .title { font-size: 26px; font-size: 1.625rem; }
  .productImageWall .txtBox { top: 40px; left: 40px; }
  .productImageWall .fLeft .txtBox { right: 40px; } }

@media (max-width: 1200px) { .productImageWall .wallFrame { width: 96.40vw; } }

@media (max-width: 1024px) { .productImageWall .wallFrame { width: 100vw; }
  .productImageWall .hoverArea { padding: 6% 8%; }
  .productImageWall .txtBox { width: calc(100% - 50px); top: 35px; left: 35px; }
  .productImageWall .fLeft .txtBox { right: 35px; }
  .productImageWall .picBox { width: 100%; }
  .productImageWall .picBox:nth-child(2) { margin-top: 0px; }
  .productImageWall .wa .imgFrame { width: 88%; } }

@media (max-width: 767px) { .productImageWall .show .titleBox { opacity: 1; -webkit-transition: opacity .8s ease .3s; -o-transition: opacity .8s ease .3s; transition: opacity .8s ease .3s; }
  .productImageWall .smallHover .eva:hover .hoverArea .info { -webkit-line-clamp: 2; }
  .productImageWall .hoverArea { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .productImageWall .hoverArea .textBox { margin-bottom: 20px; }
  .productImageWall .hoverArea .icon { margin-bottom: 20px; }
  .productImageWall .hoverArea .title { font-size: 20px; font-size: 1.25rem; margin-bottom: 8px; }
  .productImageWall .hoverArea .info { font-size: 12px; font-size: 0.75rem; }
  .productImageWall .smallHover .hoverArea { padding: 6%; }
  .productImageWall .titleBox { padding: 0 4.5% 0 4.5%; margin: 0 0 60px 0; }
  .productImageWall .picBox { padding: 0 20px; margin: 0 0 50px 0; }
  .productImageWall .txtBox { width: calc(100% - 30px); }
  .productImageWall .txtBox .title { font-size: 22px; font-size: 1.375rem; }
  .productImageWall .txtBox .subTitle { font-size: 14px; font-size: 0.875rem; } }

@media (max-width: 414px) { .productImageWall .smallHover .eva .hoverArea .textBox { margin-bottom: 10px; }
  .productImageWall .smallHover .eva .hoverArea .icon { margin-bottom: 10px; }
  .productImageWall .hoverArea .moreBtn { font-size: 12px; font-size: 0.75rem; }
  .productImageWall .wa .imgFrame { width: 100%; }
  .productImageWall .wb .imgFrame { width: 100%; }
  .productImageWall .wc .imgFrame { width: 100%; } }

@media (max-width: 413px) { .productImageWall .smallHover .eva:hover .hoverArea .info { -webkit-line-clamp: 1; }
  .productImageWall .smallHover .eva:hover .hoverArea .textBox { margin-bottom: 5px; }
  .productImageWall .smallHover .eva:hover .hoverArea .icon { margin-bottom: 5px; }
  .productImageWall .smallHover .eva:hover .hoverArea .title { margin-bottom: 2px; } }

.product[data-page=indexList] .backToTopBtn { margin: 0 auto 100px auto; opacity: 0; }

.product[data-page=indexList] .backToTopBtn.show { opacity: 1; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }

.product[data-page=indexList] .titleBoxKFC { width: 65%; padding: 0 14%; margin: 0 0 40px 0; }

.product[data-page=indexList] .titleBoxKFC.show .title { opacity: 1; -webkit-transition: opacity .8s ease .3s; -o-transition: opacity .8s ease .3s; transition: opacity .8s ease .3s; }

.product[data-page=indexList] .titleBoxKFC.show .info { opacity: 1; -webkit-transition: opacity .8s ease .5s; -o-transition: opacity .8s ease .5s; transition: opacity .8s ease .5s; }

.product[data-page=indexList] .titleBoxKFC .title { opacity: 0; }

.product[data-page=indexList] .titleBoxKFC .info { opacity: 0; }

@media (max-width: 1024px) { .product[data-page=indexList] .titleBoxKFC { width: 65%; padding: 0 9%; } }

@media (max-width: 767px) { .product[data-page=indexList] .titleBoxKFC { width: 100%; } }

.productListImageWall { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 29vh 6.5% 0 6.5%; margin: 0 0 100px 0; }

.productListImageWall .show .titleBox { opacity: 1; -webkit-transition: opacity 1.2s ease .6s; -o-transition: opacity 1.2s ease .6s; transition: opacity 1.2s ease .6s; }

.productListImageWall .wallFrame { width: 100%; margin: 0 auto; }

.productListImageWall .wallFrame .baby { margin: 0 0 2px 0; display: -webkit-box; display: -ms-flexbox; display: flex; }

.productListImageWall .wallFrame .baby .hakunamatata { width: calc(50% - 2px); margin: 0 1px; }

.productListImageWall .wallFrame .baby .hakunamatata .itemSec:first-child { margin-bottom: 2px; }

.productListImageWall .wallFrame .baby .hakunamatata .itemSec:last-child { margin-bottom: 0; }

.productListImageWall .wallFrame .link { width: 100%; height: 100%; padding: 45px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; overflow: hidden; }

.productListImageWall .wallFrame .link:hover:after { -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }

.productListImageWall .wallFrame .link:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }

.productListImageWall .wallFrame .itemSec { background-color: #f4f4f4; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; }

.productListImageWall .wallFrame .itemSec.show:after { -webkit-transform: translateY(110%); -ms-transform: translateY(110%); transform: translateY(110%); -webkit-transition: -webkit-transform 1s ease .4s; transition: -webkit-transform 1s ease .4s; -o-transition: transform 1s ease .4s; transition: transform 1s ease .4s; transition: transform 1s ease .4s, -webkit-transform 1s ease .4s; }

.productListImageWall .wallFrame .itemSec:hover .ed .iconBtn { color: #fff; }

.productListImageWall .wallFrame .itemSec:hover .textBox .title { color: #fff; }

.productListImageWall .wallFrame .itemSec:hover .moneyBox .dPrice { color: #fff; }

.productListImageWall .wallFrame .itemSec:after { content: ''; display: block; background-color: #f4f4f4; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }

.productListImageWall .wallFrame .imgBox { margin: 110px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; }

.productListImageWall .wallFrame .imgBox .img { width: auto; max-height: 100%; }

.productListImageWall .wallFrame .textBox { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% - 90px); position: absolute; left: 45px; top: 50px; z-index: 1; }

.productListImageWall .wallFrame .textBox.ed .solid { opacity: 1; }

.productListImageWall .wallFrame .textBox .text { width: calc(100% - 35px); }

.productListImageWall .wallFrame .textBox .title { font-size: 20px; font-size: 1.25rem; letter-spacing: 0.5px; line-height: 1.4; }

.productListImageWall .wallFrame .textBox .subFa { color: #666; font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; line-height: 1.6; }

.productListImageWall .wallFrame .textBox .iconBtn { cursor: pointer; color: #c3c3c3; width: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }

.productListImageWall .wallFrame .textBox .solid { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; }

.productListImageWall .wallFrame .moneyBox { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% - 90px); position: absolute; left: 45px; bottom: 50px; z-index: 1; }

.productListImageWall .wallFrame .moneyBox.ed .iconBtn { color: #000; }

.productListImageWall .wallFrame .moneyBox .coco { line-height: 1.4; }

.productListImageWall .wallFrame .moneyBox .oPrice { color: #999; font-size: 14px; font-size: 0.875rem; position: relative; display: inline-block; }

.productListImageWall .wallFrame .moneyBox .oPrice:after { content: ''; display: block; background-color: #999; width: 100%; height: 1px; position: absolute; left: 0; top: 50%; }

.productListImageWall .wallFrame .moneyBox .dPrice { font-size: 18px; font-size: 1.125rem; }

.productListImageWall .wallFrame .moneyBox .text { width: calc(100% - 35px); }

.productListImageWall .wallFrame .moneyBox .iconBtn { cursor: pointer; color: #c3c3c3; width: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.productListImageWall .wallFrame .moneyBox .iconBtn:hover { color: #000; }

.productListImageWall .styleA .itemSec { width: calc(25% - 2px); margin: 0 1px; }

.productListImageWall .styleA .imgBox { height: 300px; }

.productListImageWall .styleB .itemSec { width: calc(100% - 2px); margin: 0 auto; }

.productListImageWall .styleB .imgBox { height: 600px; }

.productListImageWall .styleC .itemSec { width: calc(50% - 2px); margin: 0 1px; }

.productListImageWall .styleC .imgBox { height: 300px; }

.productListImageWall .styleD .itemSec { margin: 0 1px; }

.productListImageWall .styleD .imgBox { height: 300px; }

.productListImageWall .styleD .itemSec:nth-child(1) { width: calc(25% - 2px); }

.productListImageWall .styleD .itemSec:nth-child(2) { width: calc(25% - 2px); }

.productListImageWall .styleD .itemSec:nth-child(3) { width: calc(50% - 2px); }

.productListImageWall .styleE .itemSec { margin: 0 1px; }

.productListImageWall .styleE .imgBox { height: 300px; }

.productListImageWall .styleE .itemSec:nth-child(1) { width: calc(50% - 2px); }

.productListImageWall .styleE .itemSec:nth-child(2) { width: calc(25% - 2px); }

.productListImageWall .styleE .itemSec:nth-child(3) { width: calc(25% - 2px); }

.productListImageWall .styleF .itemSec { margin: 0 1px; }

.productListImageWall .styleF .imgBox { height: 300px; }

.productListImageWall .styleF .itemSec:nth-child(1) { width: calc(25% - 2px); }

.productListImageWall .styleF .itemSec:nth-child(2) { width: calc(50% - 2px); }

.productListImageWall .styleF .itemSec:nth-child(3) { width: calc(25% - 2px); }

.productListImageWall .styleG .hakunamatata:nth-child(1) .imgBox { height: 300px; }

.productListImageWall .styleG .hakunamatata:nth-child(2) .imgBox { height: 900px; }

.productListImageWall .styleH .hakunamatata:nth-child(1) .imgBox { height: 900px; }

.productListImageWall .styleH .hakunamatata:nth-child(2) .imgBox { height: 300px; }

@media (max-width: 1200px) { .productListImageWall .baby { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .productListImageWall .styleA .itemSec { width: calc(50% - 2px); margin: 0 1px; }
  .productListImageWall .styleD .itemSec:nth-child(1) { width: calc(50% - 2px); }
  .productListImageWall .styleD .itemSec:nth-child(2) { width: calc(50% - 2px); }
  .productListImageWall .styleD .itemSec:nth-child(3) { width: calc(100% - 2px); }
  .productListImageWall .styleE .itemSec:nth-child(1) { width: calc(100% - 2px); }
  .productListImageWall .styleE .itemSec:nth-child(2) { width: calc(50% - 2px); }
  .productListImageWall .styleE .itemSec:nth-child(3) { width: calc(50% - 2px); }
  .productListImageWall .styleF .itemSec:nth-child(1) { width: calc(50% - 2px); -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
  .productListImageWall .styleF .itemSec:nth-child(2) { width: calc(100% - 2px); -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .productListImageWall .styleF .itemSec:nth-child(3) { width: calc(50% - 2px); -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } }

@media (max-width: 1024px) { .productListImageWall .styleA.baby { margin: 0; }
  .productListImageWall .styleA .imgBox { height: 200px; }
  .productListImageWall .styleA .itemSec { margin: 0 1px 2px 1px; }
  .productListImageWall .styleB .imgBox { height: 400px; }
  .productListImageWall .styleC .imgBox { height: 200px; }
  .productListImageWall .styleD .imgBox { height: 200px; }
  .productListImageWall .styleD .itemSec:nth-child(1) { margin: 0 1px 2px 1px; }
  .productListImageWall .styleD .itemSec:nth-child(2) { margin: 0 1px 2px 1px; }
  .productListImageWall .styleE .imgBox { height: 200px; }
  .productListImageWall .styleE .itemSec:nth-child(1) { margin: 0 1px 2px 1px; }
  .productListImageWall .styleF .imgBox { height: 200px; }
  .productListImageWall .styleF .itemSec:nth-child(1) { margin: 0 1px 2px 1px; }
  .productListImageWall .styleF .itemSec:nth-child(3) { margin: 0 1px 2px 1px; }
  .productListImageWall .styleG .hakunamatata:nth-child(1) .imgBox { height: 150px; }
  .productListImageWall .styleG .hakunamatata:nth-child(2) .imgBox { height: 600px; }
  .productListImageWall .styleH .hakunamatata:nth-child(1) .imgBox { height: 600px; }
  .productListImageWall .styleH .hakunamatata:nth-child(2) .imgBox { height: 150px; } }

@media (max-width: 767px) { .productListImageWall { padding: 29vh 0 0 0; } }

@media (max-width: 600px) { .productListImageWall .wallFrame .link { padding: 45px 30px; }
  .productListImageWall .wallFrame .textBox { width: calc(100% - 60px); left: 30px; }
  .productListImageWall .wallFrame .moneyBox { width: calc(100% - 60px); left: 30px; }
  .productListImageWall .baby { margin: 0 !important; }
  .productListImageWall .baby .itemSec { width: 100% !important; margin: 0 !important; margin: 1px 0 !important; }
  .productListImageWall .baby .hakunamatata { width: 100% !important; margin: 0 !important; }
  .productListImageWall .styleB .imgBox { height: 200px; }
  .productListImageWall .styleG .hakunamatata:nth-child(1) .imgBox { height: 200px; }
  .productListImageWall .styleG .hakunamatata:nth-child(2) .imgBox { height: 300px; }
  .productListImageWall .styleH .hakunamatata:nth-child(1) .imgBox { height: 300px; }
  .productListImageWall .styleH .hakunamatata:nth-child(2) .imgBox { height: 200px; } }

.productSerieSelect { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 0 14% 10px 14%; margin-left: -20px; margin-bottom: 75px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; }

.productSerieSelect .list { cursor: pointer; padding: 5px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; opacity: 0; }

.productSerieSelect .list.show { opacity: 1; }

.productSerieSelect .now .text { color: #000; -webkit-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; }

.productSerieSelect .now .text:after { width: 100%; left: 0; right: 0; -webkit-transition: width .5s ease; -o-transition: width .5s ease; transition: width .5s ease; }

.productSerieSelect .text { color: #999; font-size: 16px; font-size: 1rem; font-weight: 900; letter-spacing: 0.5px; position: relative; -webkit-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease; }

.productSerieSelect .text:after { content: ''; display: block; background-color: #000; width: 0; height: 5px; position: absolute; left: 0; bottom: -10px; }

@media (max-width: 1024px) { .productSerieSelect { width: 100%; padding: 0 9% 10px 9%; } }

.product[data-page=indexListInfo] .backToTopBtn { margin: 0 auto 100px auto; opacity: 0; }

.product[data-page=indexListInfo] .backToTopBtn.show { opacity: 1; }

.product[data-page=indexListInfo] .toYou { font-size: 40px; font-size: 2.5rem; font-weight: 900; text-align: center; line-height: 1.4; margin: 0 0 50px 0; letter-spacing: 1px; }

.prodInfoBanner { display: -webkit-box; display: -ms-flexbox; display: flex; }

.prodInfoBanner.show .slickSec { opacity: 1; -webkit-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; }

.prodInfoBanner.show .infoSec .box { opacity: 1; -webkit-transition: opacity 1s ease .5s; -o-transition: opacity 1s ease .5s; transition: opacity 1s ease .5s; }

.prodInfoBanner .slickSec { width: 50%; height: 100vh; margin: 0 0 0 0; position: relative; opacity: 0; }

.prodInfoBanner .slickSec .list:focus { outline: none; }

.prodInfoBanner .slickSec .bkImg { width: 50vw; height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; }

.prodInfoBanner .slickSec .slick-dots { width: 50px; height: 100%; left: calc(6.3% - 25px); bottom: 0; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.prodInfoBanner .slickSec .slick-dots li.slick-active button:before, .prodInfoBanner .slickSec .slick-dots li.slick-active button:hover:before { opacity: 1; }

.prodInfoBanner .slickSec .slick-dots li button:hover:before { opacity: .25; }

.prodInfoBanner .slickSec .slick-dots li { margin: 0 0 25px 0; }

.prodInfoBanner .slickSec .slick-dots li button { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); }

.prodInfoBanner .infoSec { background-color: #f1f1ef; width: 50%; height: 100vh; padding: 12%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.prodInfoBanner .infoSec .box { opacity: 0; }

.prodInfoBanner .infoSec .line { border-bottom: solid 1px #ccc; }

.prodInfoBanner .infoSec .heartArea { cursor: pointer; position: absolute; right: -10px; top: -10px; padding: 10px; }

.prodInfoBanner .infoSec .heartArea.ed .solid { opacity: 1; }

.prodInfoBanner .infoSec .heartArea .solid { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; }

.prodInfoBanner .infoSec .boardBox { position: relative; padding-bottom: 65px; }

.prodInfoBanner .infoSec .boardBox .info { color: #666; font-size: 16px; font-size: 1rem; margin: 0 0 10px 0; }

.prodInfoBanner .infoSec .boardBox .title { font-size: 30px; font-size: 1.875rem; line-height: 1.4; margin: 0 0 15px 0; }

.prodInfoBanner .infoSec .boardBox .text { font-size: 18px; font-size: 1.125rem; line-height: 1.6; }

.prodInfoBanner .infoSec .kitBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.prodInfoBanner .infoSec .kitBox .text { font-size: 22px; font-size: 1.375rem; letter-spacing: 0.5px; line-height: 1.5; }

.prodInfoBanner .infoSec .kitBox .playArea { width: 50%; padding: 35px 0; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.prodInfoBanner .infoSec .kitBox input { font-size: 22px; font-size: 1.375rem; font-weight: 900; width: calc(60% - 72px); text-align: right; border: none; background-color: #f1f1ef; }

.prodInfoBanner .infoSec .kitBox input::-webkit-input-placeholder { color: #000; opacity: 1; }

.prodInfoBanner .infoSec .kitBox input:-ms-input-placeholder { color: #000; opacity: 1; }

.prodInfoBanner .infoSec .kitBox input::-ms-input-placeholder { color: #000; opacity: 1; }

.prodInfoBanner .infoSec .kitBox input::placeholder { color: #000; opacity: 1; }

.prodInfoBanner .infoSec .kitBox input:-ms-input-placeholder { color: #000; }

.prodInfoBanner .infoSec .kitBox input::-ms-input-placeholder { color: #000; }

.prodInfoBanner .infoSec .kitBox .icon { cursor: pointer; padding: 10px; display: block; -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

.prodInfoBanner .infoSec .kitBox .icon:hover { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

.prodInfoBanner .infoSec .moneyBox { padding-top: 50px; margin-bottom: 50px; }

.prodInfoBanner .infoSec .moneyBox .coco { line-height: 1.5; }

.prodInfoBanner .infoSec .moneyBox .oPrice { color: #666; font-size: 16px; font-size: 1rem; margin: 0 0 10px 0; }

.prodInfoBanner .infoSec .moneyBox .dPrice { font-size: 22px; font-size: 1.375rem; }

.prodInfoBanner .infoSec .moneyBox .bold { font-weight: 900; display: inline-block; position: relative; margin-left: 5px; }

.prodInfoBanner .infoSec .moneyBox .dis:after { content: ''; display: block; background-color: #666; width: 100%; height: 1px; position: absolute; left: 0; top: 50%; }

.prodInfoBanner .infoSec .btnBox { display: -webkit-box; display: -ms-flexbox; display: flex; }

.prodInfoBanner .infoSec .btnBox .white { color: #000; background-color: #fff; margin-right: 1px; }

.prodInfoBanner .infoSec .btnBox .black { color: #fff; background-color: #000; margin-left: 1px; }

.prodInfoBanner .infoSec .btnBox .btn { cursor: pointer; width: calc(50% - 1px); height: 55px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.prodInfoBanner .infoSec .btnBox .btn .text { font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; font-weight: 900; }

@media (max-width: 1366px) { .prodInfoBanner .infoSec { padding: 12% 8%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } }

@media (max-width: 1024px) { .prodInfoBanner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .prodInfoBanner .slickSec { width: 100%; height: 50vh; }
  .prodInfoBanner .slickSec .bkImg { width: 100vw; height: 50vh; }
  .prodInfoBanner .infoSec { width: 100%; height: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } }

@media (max-width: 767px) { .prodInfoBanner { padding-top: 80px; }
  .prodInfoBanner .infoSec .kitBox .text { font-size: 20px; font-size: 1.25rem; width: 60%; }
  .prodInfoBanner .infoSec .kitBox .playArea { width: 40%; }
  .prodInfoBanner .infoSec .kitBox input { width: calc(100% - 72px); }
  .prodInfoBanner .infoSec .moneyBox .dPrice { font-size: 20px; font-size: 1.25rem; }
  .prodInfoBanner .infoSec .boardBox .text { font-size: 16px; font-size: 1rem; } }

@media (max-width: 374px) { .prodInfoBanner .infoSec .boardBox .title { font-size: 24px; font-size: 1.5rem; }
  .prodInfoBanner .infoSec .boardBox .text { font-size: 14px; font-size: 0.875rem; }
  .prodInfoBanner .infoSec .kitBox .text { font-size: 16px; font-size: 1rem; }
  .prodInfoBanner .infoSec .moneyBox .dPrice { font-size: 16px; font-size: 1rem; } }

.prodAsk { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: -1; visibility: hidden; }

.prodAsk.showAsk { z-index: 3; visibility: visible; }

.prodAsk.showAsk .back { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform .8s ease; transition: -webkit-transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; transition: transform .8s ease, -webkit-transform .8s ease; }

.prodAsk.showAsk .moonBox { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition: -webkit-transform .8s ease .7s; transition: -webkit-transform .8s ease .7s; -o-transition: transform .8s ease .7s; transition: transform .8s ease .7s; transition: transform .8s ease .7s, -webkit-transform .8s ease .7s; }

.prodAsk.closeAsk .back { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform .5s ease .4s; transition: -webkit-transform .5s ease .4s; -o-transition: transform .5s ease .4s; transition: transform .5s ease .4s; transition: transform .5s ease .4s, -webkit-transform .5s ease .4s; }

.prodAsk.closeAsk .moonBox { -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

.prodAsk .back { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }

.prodAsk .moonBox { border-radius: 50%; background-color: #feefaa; width: 484px; height: 484px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); }

.prodAsk .moonBox .title { font-size: 40px; font-size: 2.5rem; font-weight: 900; margin: 0 0 15px 0; }

.prodAsk .moonBox .text { font-size: 16px; font-size: 1rem; width: 210px; text-align: center; letter-spacing: 0.5px; line-height: 1.6; margin: 0 0 35px 0; }

.prodAsk .moonBox .circle { border-radius: 50%; color: #feefaa; background-color: #000; width: 86px; height: 86px; margin: 0 0 45px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }

.prodAsk .moonBox .circle .num { font-size: 18px; font-size: 1.125rem; font-weight: 900; position: absolute; left: 55%; top: 47%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.prodAsk .moonBox .circle img { width: auto; }

.prodAsk .moonBox .btnBox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.prodAsk .moonBox .btnBox .gray { color: #7f7755; }

.prodAsk .moonBox .btnBox .gray.btn .line { background-color: #7f7755; }

.prodAsk .moonBox .btnBox .btn { cursor: pointer; width: 25%; text-align: center; }

.prodAsk .moonBox .btnBox .btn:nth-child(1) { margin-right: 1px; }

.prodAsk .moonBox .btnBox .btn:nth-child(2) { margin-left: 1px; }

.prodAsk .moonBox .btnBox .btn .word { font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; padding: 10px 0; }

.prodAsk .moonBox .btnBox .btn .line { background-color: #000; width: 100%; height: 4px; display: block; }

@media (max-width: 767px) { .prodAsk.showAsk .moonBox { opacity: 1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .8s ease .7s; -o-transition: opacity .8s ease .7s; transition: opacity .8s ease .7s; }
  .prodAsk.closeAsk .moonBox { opacity: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; }
  .prodAsk .moonBox { opacity: 0; border-radius: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

.proBigMix { padding: 0 6.25%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }

.proBigMix:after { content: ''; display: block; background-color: #f1f1ef; position: absolute; right: 0; top: 0; z-index: -1; width: 50%; height: 100px; }

.proBigMix:before { content: ''; display: block; background-color: #f1f1ef; position: absolute; right: 0; top: 0; z-index: -1; width: 100px; height: 100vh; }

.proBigMix .mealArea { width: 77%; margin: 0 auto 140px auto; }

.proBigMix .mealArea .mealType { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 60px 0; border-bottom: solid 1px #ccc; position: relative; opacity: 0; }

.proBigMix .mealArea .mealType.show { opacity: 1; -webkit-transition: opacity 1.5s ease .5s; -o-transition: opacity 1.5s ease .5s; transition: opacity 1.5s ease .5s; }

.proBigMix .mealArea .mealType:last-child { border-bottom: none; }

.proBigMix .mealArea .mealType .mealTitle { font-size: 18px; font-size: 1.125rem; font-weight: 900; width: 35%; padding-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1.5; }

.proBigMix .mealArea .mealType .vegetable { width: 65%; }

.proBigMix .mealArea .mealType .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 0 0 30px 0; }

.proBigMix .mealArea .mealType .list:last-child { margin: 0; }

.proBigMix .mealArea .mealType .list .number { color: #666; margin-right: 20px; }

.proBigMix .mealArea .mealType .text { font-size: 14px; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.5px; }

.proBigMix .mealArea .mealType.linkSet .link { width: 17%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; right: 0; top: 0; }

.proBigMix .mealArea .mealType.linkSet .link:after { content: ''; display: block; background-color: #000; width: 100%; height: 1px; position: absolute; left: 0; top: -1px; }

.proBigMix .mealArea .meal3 .vegetable { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 17%; }

.proBigMix .mealArea .meal4 .vegetable { padding-right: 17%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.proBigMix .mealArea .meal4 .text { font-size: 16px; font-size: 1rem; font-weight: 900; }

.proBigMix .mealArea .meal5 .vegeBox { margin: 0 0 50px 0; }

.proBigMix .mealArea .meal5 .text { margin: 0 0 30px 0; }

.proBigMix .mealArea .meal5 .slick-dots li button { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); }

@media (max-width: 768px) { .proBigMix .mealArea .mealType { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .proBigMix .mealArea .mealType .list { margin: 0 0 20px 0; }
  .proBigMix .mealArea .mealType .mealTitle { width: 100%; padding: 0; margin: 0 0 25px 0; }
  .proBigMix .mealArea .mealType .vegetable { width: 100%; }
  .proBigMix .mealArea .meal5 .text { margin: 0 0 20px 0; } }

.proBigCake { width: 100%; margin: 0 0 145px 0; display: -webkit-box; display: -ms-flexbox; display: flex; }

.proBigCake.float { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 0 6.25%; position: fixed; left: 0; top: 0; z-index: 2; }

.proBigCake.float.hide { visibility: hidden; opacity: 0; }

.proBigCake.stuck { opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.proBigCake.stuck.show { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity .5s ease, -webkit-transform 1s ease; transition: opacity .5s ease, -webkit-transform 1s ease; -o-transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease, -webkit-transform 1s ease; }

.proBigCake .list { cursor: pointer; color: #b3b3b3; width: 33.33%; margin: 0 5px; }

.proBigCake .list.now { color: #000; }

.proBigCake .list.now .line { background-color: #000; }

.proBigCake .list .line { display: block; background-color: #b3b3b3; width: 100%; height: 8px; }

.proBigCake .list .text { font-size: 18px; font-size: 1.125rem; padding: 30px 0; font-weight: 900; letter-spacing: 0.5px; text-align: center; }

@media (max-width: 767px) { .proBigCake .list { width: auto; }
  .proBigCake .list .text { white-space: nowrap; width: 50vw; padding: 15px 0; } }

.proSpecifi { background-color: #f1f1ef; padding: 200px 6.25%; }

.proSpecifi.typeB .hardware .subBox .number { margin: 0; }

.proSpecifi.show .faTitle { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity .5s ease, -webkit-transform 1s ease; transition: opacity .5s ease, -webkit-transform 1s ease; -o-transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease, -webkit-transform 1s ease; }

.proSpecifi.show .faSubTitle { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity .5s ease .6s, -webkit-transform 1s ease .6s; transition: opacity .5s ease .6s, -webkit-transform 1s ease .6s; -o-transition: opacity .5s ease .6s, transform 1s ease .6s; transition: opacity .5s ease .6s, transform 1s ease .6s; transition: opacity .5s ease .6s, transform 1s ease .6s, -webkit-transform 1s ease .6s; }

.proSpecifi .faTitle { opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.proSpecifi .faTitle.toYou { margin: 0 0 10px 0; }

.proSpecifi .faSubTitle { font-size: 16px; font-size: 1rem; line-height: 1.6; text-align: center; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.proSpecifi .titleBox { margin: 0 0 65px 0; letter-spacing: 0.5px; }

.proSpecifi .secBody { width: 77%; margin: 0 auto; border-top: solid 4px #000; border-bottom: solid 4px #000; }

.proSpecifi .hardware { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 50px 0; border-bottom: solid 4px #000; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.proSpecifi .hardware.show { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, -webkit-transform 1s ease; -o-transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }

.proSpecifi .hardware .saladBox { width: 60%; display: -webkit-box; display: -ms-flexbox; display: flex; }

.proSpecifi .hardware .subBox { font-size: 18px; font-size: 1.125rem; width: 33.33%; padding-right: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.proSpecifi .hardware .subBox .number { color: #666; font-size: 12px; font-size: 0.75rem; font-weight: 900; margin-right: 12px; }

.proSpecifi .hardware .imgBox { width: 33.33%; padding: 0 15px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.proSpecifi .hardware .imgBox .img { width: auto; }

.proSpecifi .hardware .itemBox { width: 33.33%; padding-right: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.proSpecifi .hardware .itemBox .name { font-size: 18px; font-size: 1.125rem; line-height: 1.6; font-weight: 900; letter-spacing: 0.5px; }

.proSpecifi .hardware .itemBox .serial { color: #666; font-size: 16px; font-size: 1rem; line-height: 1.6; letter-spacing: 0.5px; }

.proSpecifi .hardware .steakBox { width: 40%; }

.proSpecifi .hardware .steakBox .friesBox { display: -webkit-box; display: -ms-flexbox; display: flex; }

.proSpecifi .hardware .steakBox .friesBox:last-child .name { border-bottom: none; }

.proSpecifi .hardware .steakBox .friesBox:last-child .detailBox { border-bottom: none; }

.proSpecifi .hardware .steakBox .name { font-size: 14px; font-size: 0.875rem; font-weight: 900; width: calc(50% - 10px); padding: 12px 0; margin-right: auto; line-height: 1.4; border-bottom: solid 1px #c9c9c9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.5px; }

.proSpecifi .hardware .steakBox .detailBox { font-size: 12px; font-size: 0.75rem; width: 50%; padding: 12px 0; border-bottom: solid 1px #c9c9c9; letter-spacing: 0.5px; }

.proSpecifi .hardware .steakBox .detailBox .text { line-height: 1.6; }

.proSpecifi .remark { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 50px 0; word-break: break-word; opacity: 0; }

.proSpecifi .remark.show { opacity: 1; -webkit-transition: opacity 1s ease .5s; -o-transition: opacity 1s ease .5s; transition: opacity 1s ease .5s; }

.proSpecifi .remark .subBox { font-size: 18px; font-size: 1.125rem; width: 20%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.proSpecifi .remark .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }

.proSpecifi .remark .list .number { color: #666; font-size: 12px; font-size: 0.75rem; margin-right: 20px; }

.proSpecifi .remark .list .text { font-size: 14px; font-size: 0.875rem; line-height: 1.6; margin: 0 0 20px 0; }

@media (max-width: 1366px) { .proSpecifi .secBody { width: 100%; }
  .proSpecifi .remark .subBox { width: 25%; }
  .proSpecifi .remark .listBox { width: 75%; } }

@media (max-width: 1024px) { .proSpecifi .hardware .saladBox { width: 50%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .proSpecifi .hardware .steakBox { width: 50%; }
  .proSpecifi .hardware .subBox { width: 100%; margin: 0 0 25px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .proSpecifi .hardware .imgBox { width: 100%; margin: 0 0 25px 0; }
  .proSpecifi .hardware .itemBox { width: 100%; text-align: center; } }

@media (max-width: 768px) { .proSpecifi .hardware { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .proSpecifi .hardware .subBox { width: 100%; }
  .proSpecifi .hardware .imgBox { width: 100%; }
  .proSpecifi .hardware .itemBox { width: 100%; margin: 0 0 25px 0; }
  .proSpecifi .hardware .steakBox { width: 100%; }
  .proSpecifi .remark { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .proSpecifi .remark .subBox { width: 100%; padding: 0; margin: 0 0 30px 0; }
  .proSpecifi .remark .subBox .sub { width: 100%; text-align: center; }
  .proSpecifi .remark .listBox { width: 100%; } }

.proRelated { padding: 200px 20px 0 20px; }

.proRelated.show .faTitle { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity .5s ease, -webkit-transform 1s ease; transition: opacity .5s ease, -webkit-transform 1s ease; -o-transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease, -webkit-transform 1s ease; }

.proRelated.show .slickBox { opacity: 1; -webkit-transition: opacity 1.5s ease .5s; -o-transition: opacity 1.5s ease .5s; transition: opacity 1.5s ease .5s; }

.proRelated .faTitle { opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.proRelated .imgBox { margin: 0 0 40px 0; }

.proRelated .imgBox .img { width: auto; margin: 0 auto; }

.proRelated .slickBox { width: 76%; margin: 0 auto; padding: 0 0 200px 0; opacity: 0; }

.proRelated .slickBox .list { width: 20%; text-align: center; letter-spacing: 0.5px; padding: 0 12px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.proRelated .slickBox .list .title { font-size: 20px; font-size: 1.25rem; line-height: 1.6; }

.proRelated .slickBox .list .text { color: #666; font-size: 14px; font-size: 0.875rem; line-height: 1.6; }

.proRelated .slickBox .slick-dots { bottom: 90px; }

.proRelated .slickBox .slick-dots li button { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); }

.prodInfoFeatures.show .faTitle { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity .5s ease, -webkit-transform 1s ease; transition: opacity .5s ease, -webkit-transform 1s ease; -o-transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease; transition: opacity .5s ease, transform 1s ease, -webkit-transform 1s ease; }

.prodInfoFeatures .faTitle { opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.prodInfoFeatures .slickBox { width: 75vw; height: calc(75vw / 2); margin: 0 auto 100px auto; opacity: 0; }

.prodInfoFeatures .slickBox.show { opacity: 1; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }

.prodInfoFeatures .slickBox .list .text { color: #666; font-size: 14px; font-size: 0.875rem; text-align: center; margin-top: 20px; letter-spacing: 0.5px; padding: 0 10%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; -webkit-box-orient: vertical; }

.prodInfoFeatures .slickBox .slick-dots { bottom: -80px; }

.prodInfoFeatures .slickBox .slick-dots li button { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); }

.prodInfoFeatures .mediaBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.prodInfoFeatures .mediaBox iframe { max-width: 100%; width: 75vw; height: calc(75vw / 2); }

@media (max-width: 1366px) { .prodInfoFeatures .slickBox { width: calc(100vw - 12.5vw); height: calc( (100vw - 12.5vw) / 2); }
  .prodInfoFeatures .slickBox .list { width: 100%; }
  .prodInfoFeatures .mediaBox iframe { width: calc(100vw - 12.5vw); height: calc( (100vw - 12.5vw) / 2); }
  .prodInfoFeatures .mealArea { width: 100%; } }

.titleBoxKFC { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 4.5% 0 9%; margin: 0 0 100px 0; letter-spacing: 0.5px; opacity: 1; }

.titleBoxKFC .title { font-size: 48px; font-size: 3rem; font-weight: 900; line-height: 1.4; }

.titleBoxKFC .info { line-height: 1.6; }

@media (max-width: 767px) { .titleBoxKFC .show .titleBoxKFC { opacity: 1; -webkit-transition: opacity .8s ease .3s; -o-transition: opacity .8s ease .3s; transition: opacity .8s ease .3s; }
  .titleBoxKFC .titleBoxKFC { padding: 0 4.5% 0 4.5%; margin: 0 0 60px 0; } }

.productAllImgBox { height: 100%; background-size: cover; background-position: center center; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; opacity: 0; }

.productAllImgBox.show { opacity: 1; -webkit-transition: all 1s ease 1s; -moz-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; -o-transition: all 1s ease 1s; transition: all 1s ease 1s; }

.productAllImgBox img { width: auto; position: absolute; left: 40%; top: 40%; padding: 20px; }

.productAllImgBox .backgroundImg { z-index: -1; padding: 0; left: 0; top: 0; }

.productAllImgBox .people { left: 0; top: 0; }

.productAllImgBox .onfocus { border: dashed 1px #d0d0d0; }

@media (max-width: 767px) { .productAllImgBox img { padding: 10px; -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; } }

.productCtrlImgBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 50%; bottom: 30px; z-index: 998; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.productCtrlImgBox.show .ctrlBtn { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: background-color 0s ease, -webkit-transform .8s ease 1s; transition: background-color 0s ease, -webkit-transform .8s ease 1s; -o-transition: transform .8s ease 1s, background-color 0s ease; transition: transform .8s ease 1s, background-color 0s ease; transition: transform .8s ease 1s, background-color 0s ease, -webkit-transform .8s ease 1s; }

.productCtrlImgBox.show .text { opacity: 1; -webkit-transition: -webkit-transform .8s ease 1.5s; transition: -webkit-transform .8s ease 1.5s; -o-transition: transform .8s ease 1.5s; transition: transform .8s ease 1.5s; transition: transform .8s ease 1.5s, -webkit-transform .8s ease 1.5s; }

.productCtrlImgBox.show .icon { opacity: 1; -webkit-transition: -webkit-transform .8s ease 1.5s; transition: -webkit-transform .8s ease 1.5s; -o-transition: transform .8s ease 1.5s; transition: transform .8s ease 1.5s; transition: transform .8s ease 1.5s, -webkit-transform .8s ease 1.5s; }

.productCtrlImgBox .ctrlBtn { cursor: pointer; border-radius: 50%; background-color: #f3f3f3; width: 80px; height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; margin: 0 12px; -webkit-transition: background-color .6s ease; -o-transition: background-color .6s ease; transition: background-color .6s ease; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

.productCtrlImgBox .ctrlBtn:active { background-color: #ccc; -webkit-transition: background-color 0s ease; -o-transition: background-color 0s ease; transition: background-color 0s ease; }

.productCtrlImgBox .text { font-size: 12px; font-size: 0.75rem; -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); font-weight: 900; letter-spacing: 0.5px; opacity: 0; }

.productCtrlImgBox .icon { opacity: 0; }

@media (max-width: 413px) { .productCtrlImgBox { bottom: 20px; }
  .productCtrlImgBox .ctrlBtn { margin: 0 5px; } }

@media (max-width: 374px) { .productCtrlImgBox .ctrlBtn { width: 70px; height: 70px; } }

.productFloatLeft { background-color: #f3f3f3; width: 25%; height: 100vh; position: fixed; left: 0; top: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 80px 3vw; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }

.productFloatLeft.show { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all 1.2s ease 0s; -moz-transition: all 1.2s ease 0s; -ms-transition: all 1.2s ease 0s; -o-transition: all 1.2s ease 0s; transition: all 1.2s ease 0s; }

.productFloatLeft.show .titleBox .box { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 0.8s ease 0.8s; -moz-transition: all 0.8s ease 0.8s; -ms-transition: all 0.8s ease 0.8s; -o-transition: all 0.8s ease 0.8s; transition: all 0.8s ease 0.8s; }

.productFloatLeft.show .titleBox .backward { opacity: 1; -webkit-transition: all 0.8s ease 1.2s; -moz-transition: all 0.8s ease 1.2s; -ms-transition: all 0.8s ease 1.2s; -o-transition: all 0.8s ease 1.2s; transition: all 0.8s ease 1.2s; }

.productFloatLeft.show .intro .text { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 0.8s ease 1.4s; -moz-transition: all 0.8s ease 1.4s; -ms-transition: all 0.8s ease 1.4s; -o-transition: all 0.8s ease 1.4s; transition: all 0.8s ease 1.4s; }

.productFloatLeft.show .storageWdd:before, .productFloatLeft.show .storageWdd:after { width: 100%; left: 0; right: 0; -webkit-transition: all 0.8s ease 1.2s; -moz-transition: all 0.8s ease 1.2s; -ms-transition: all 0.8s ease 1.2s; -o-transition: all 0.8s ease 1.2s; transition: all 0.8s ease 1.2s; }

.productFloatLeft.show .storageBox .list { opacity: 1; }

.productFloatLeft .titleBox { font-size: 24px; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.5px; margin: 0 0 35px 0; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; }

.productFloatLeft .titleBox .box { width: calc(100% - 50px); padding-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.productFloatLeft .titleBox .backward { opacity: 0; }

.productFloatLeft .titleBox .title { color: #ccc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.productFloatLeft .titleBox .title:after { content: ''; display: block; background-color: #7a7a7a; width: 1px; height: 10px; margin: 0 28px; }

.productFloatLeft .titleBox .title:last-child:after { display: none; }

.productFloatLeft .titleBox .title.page { color: #000; }

.productFloatLeft .titleBox .backward { background-color: rgba(255, 255, 255, 0); }

.productFloatLeft .titleBox .backward:hover { background-color: #000; }

.productFloatLeft .intro { font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; margin: 0 0 85px 0; overflow: hidden; }

.productFloatLeft .intro .text { line-height: 1.6; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.productFloatLeft .storageWdd { position: relative; }

.productFloatLeft .storageWdd:before, .productFloatLeft .storageWdd:after { content: ''; display: block; background-color: #000; width: 0%; height: 2px; position: absolute; left: 50%; }

.productFloatLeft .storageWdd:before { top: 0; }

.productFloatLeft .storageWdd:after { bottom: 0; }

.productFloatLeft .storageBox { position: relative; overflow: hidden; }

.productFloatLeft .storageBox .list { padding: 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: solid 1px #dadada; opacity: 0; }

.productFloatLeft .storageBox .list:last-child { border-bottom: none; }

.productFloatLeft .storageBox .list.eye .goodDaddy { color: #000; }

.productFloatLeft .storageBox .imgBox { border-radius: 50%; width: 80px; height: 80px; overflow: hidden; }

.productFloatLeft .storageBox .goodMommy { width: 60%; padding: 0 15px 0 30px; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: 0.5px; }

.productFloatLeft .storageBox .goodMommy .name { font-size: 16px; font-size: 1rem; font-weight: 900; line-height: 1.5; margin-bottom: 5px; }

.productFloatLeft .storageBox .goodMommy .serial { font-size: 12px; font-size: 0.75rem; line-height: 1.5; }

.productFloatLeft .storageBox .goodDaddy { color: #ccc; font-size: 22px; font-size: 1.375rem; width: 17%; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: auto; }

@media (max-width: 1700px) { .productFloatLeft { width: 30%; }
  .productFloatLeft .titleBox .title:after { margin: 0 16px; } }

@media (max-width: 1366px) { .productFloatLeft { width: 35%; padding: 80px 20px; } }

@media (max-width: 1024px) { .productFloatLeft { width: 50%; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); z-index: 1000; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; -o-transition: transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; }
  .productFloatLeft.show { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }
  .productFloatLeft.showMenu { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }
  .productFloatLeft .titleBox { display: none; }
  .productFloatLeft .intro { margin: 40px 0 50px 0; } }

@media (max-width: 767px) { .productFloatLeft { width: 85%; } }

@media (max-width: 414px) { .productFloatLeft { width: 100%; padding: 80px 20px 40px 20px; } }

.productMixCtrl { color: #fff; width: 75%; height: 65px; margin-left: auto; position: relative; opacity: 0; }

.productMixCtrl.show { opacity: 1; -webkit-transition: opacity .8s ease 1.3s; -o-transition: opacity .8s ease 1.3s; transition: opacity .8s ease 1.3s; }

.productMixCtrl .whopperBox { background-color: #1a1a1a; height: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; -webkit-transition: all 0s ease 1s; -moz-transition: all 0s ease 1s; -ms-transition: all 0s ease 1s; -o-transition: all 0s ease 1s; transition: all 0s ease 1s; }

.productMixCtrl .whopperBox:after { content: ''; display: block; background-color: #313131; width: 0; height: 1px; position: absolute; left: 50%; top: 0; }

.productMixCtrl .whopperBox.openLine { z-index: 1000; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }

.productMixCtrl .whopperBox.openLine:after { width: 100%; left: 0; right: 0; -webkit-transition: all 1s ease 1s; -moz-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; -o-transition: all 1s ease 1s; transition: all 1s ease 1s; }

.productMixCtrl .whopperBox .list { cursor: pointer; height: inherit; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 30px; }

.productMixCtrl .whopperBox .icon { margin-right: 12px; }

.productMixCtrl .whopperBox .text { color: #666; letter-spacing: 0.5px; }

.productMixCtrl .milkshakeBox { background-color: #1a1a1a; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 295px; position: absolute; left: 0; bottom: 100%; z-index: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: z-index 0s ease .8s, -webkit-transform .8s ease; transition: z-index 0s ease .8s, -webkit-transform .8s ease; -o-transition: transform .8s ease, z-index 0s ease .8s; transition: transform .8s ease, z-index 0s ease .8s; transition: transform .8s ease, z-index 0s ease .8s, -webkit-transform .8s ease; }

.productMixCtrl .milkshakeBox.opening { z-index: 999; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: z-index 0s ease, -webkit-transform .8s ease; transition: z-index 0s ease, -webkit-transform .8s ease; -o-transition: transform .8s ease, z-index 0s ease; transition: transform .8s ease, z-index 0s ease; transition: transform .8s ease, z-index 0s ease, -webkit-transform .8s ease; }

.productMixCtrl .milkshakeBox .list { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; visibility: hidden; }

.productMixCtrl .milkshakeBox .list.appear { opacity: 1; visibility: visible; -webkit-transition: all 1s ease 1s; -moz-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; -o-transition: all 1s ease 1s; transition: all 1s ease 1s; }

.productMixCtrl .milkshakeBox .photo .icon { cursor: pointer; font-size: 30px; font-size: 1.875rem; border: solid 2px #fff; border-radius: 50%; width: 80px; height: 80px; margin: 0 auto 16px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.productMixCtrl .milkshakeBox .scrollType { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10%; }

.productMixCtrl .milkshakeBox .scrollType .box { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 1140px; position: relative; padding-bottom: 15px; }

.productMixCtrl .milkshakeBox .scrollType .uploadBox .imgBox { border: dashed 1.5px #fff; }

.productMixCtrl .milkshakeBox .scrollType .boxItem { margin: 0 30px; }

.productMixCtrl .milkshakeBox .scrollType .boxItem:first-child { margin: 0 30px 0 0; }

.productMixCtrl .milkshakeBox .scrollType .boxItem:last-child { margin: 0 0 0 30px; }

.productMixCtrl .milkshakeBox .scrollType .imgBox { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; width: 180px; height: 125px; margin-bottom: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; overflow: hidden; }

.productMixCtrl .milkshakeBox .scrollType .imgBox img { width: auto; max-width: 180px; max-height: 125px; }

.productMixCtrl .milkshakeBox .scrollType .imgBox input { cursor: pointer; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }

.productMixCtrl .milkshakeBox .scrollType .imgBox .icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.productMixCtrl .milkshakeBox .scrollType .text { font-size: 12px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.5px; line-height: 1.6; }

.productMixCtrl .milkshakeBox .people .uploadBox .imgBox { background-color: rgba(0, 0, 0, 0); }

.productMixCtrl .milkshakeBox .people .imgBox { background-color: #fff; }

@media (max-width: 1700px) { .productMixCtrl { width: 70%; } }

@media (max-width: 1366px) { .productMixCtrl { width: 65%; } }

@media (max-width: 1024px) { .productMixCtrl { width: 100%; } }

@media (max-width: 767px) { .productMixCtrl .whopperBox .list { margin: 0 15px; padding: 0 15px; }
  .productMixCtrl .whopperBox .icon { margin-right: 0; }
  .productMixCtrl .whopperBox .text { display: none; }
  .productMixCtrl .milkshakeBox { background-color: rgba(0, 0, 0, 0.8); height: calc(100vh - 130px); border-top: solid 1px #313131; } }

.spMenuMode1 { display: none; }

.spMenuMode1 .callMenuBtn { width: 65px; height: 65px; }

.spMenuMode1 .callMenuBtn .lineBox { height: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.spMenuMode1 .callMenuBtn .line { background-color: #fff; width: 20px; height: 2px; margin-bottom: 6px; display: block; }

.spMenuMode1 .callMenuBtn .line:last-child { margin-bottom: 0; }

.spMenuMode1 .btnBox { width: 65px; height: 65px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }

.spMenuMode1 .btnBox.openCloseBtn .spCloseBtn { opacity: 1; visibility: visible; }

.spMenuMode1 .btnBox .spReturnBtn { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.spMenuMode1 .btnBox .spCloseBtn { font-size: 35px; font-size: 2.1875rem; background-color: #000; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; visibility: hidden; }

.spMenuMode1 .spSelectBox { width: calc(100% - 130px); height: 100%; }

.spMenuMode1 .spSelectBox .dropShow { height: inherit; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.spMenuMode1 .spSelectBox .dropList { background-color: #000; border-top: none; width: 100vw; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.spMenuMode1 .spSelectBox .list { -webkit-box-sizing: border-box; box-sizing: border-box; border: none; border-top: solid 1px #333; height: 65px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

@media (max-width: 1024px) { .spMenuMode1 { display: -webkit-box; display: -ms-flexbox; display: flex; color: #fff; background-color: #000; width: 100%; height: 65px; position: fixed; left: 0; top: 0; z-index: 1001; } }

.productTopFrame .frameBox { width: 75%; height: calc(100vh - 65px); margin-left: auto; overflow: hidden; position: relative; }

@media (max-width: 1700px) { .productTopFrame .frameBox { width: 70%; } }

@media (max-width: 1366px) { .productTopFrame .frameBox { width: 65%; } }

@media (max-width: 1024px) { .productTopFrame .frameBox { width: 100%; height: calc(100vh - 130px); margin-top: 65px; } }

.member main { padding: 295px 0 0 0; }

.member .backToTopBtn { margin: 0 auto 100px auto; opacity: 0; }

.member .backToTopBtn.show { opacity: 1; }

.member .hideProcessBlock.center.see .processBox { opacity: 1; -webkit-transition: opacity 1s ease .3s; -o-transition: opacity 1s ease .3s; transition: opacity 1s ease .3s; }

.member .hideProcessBlock.center.noSee .processBox { opacity: 0; -webkit-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; }

.member .hideProcessBlock.center .titleBox { border-bottom: solid 2px #e1e1e1; padding: 0 70px; }

.member .hideProcessBlock.center .infoBox { font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; padding: 55px 70px 0 70px; }

.member .hideProcessBlock.center .infoBox .text { line-height: 1.6; margin: 0 0 40px 0; }

.member .hideProcessBlock.center .infoBox .text:last-child { margin: 0; }

.member .hideProcessBlock.center .logInBtn { max-width: none; min-height: 60px; }

.member .hideProcessBlock.center .logInBtn .btn { width: 50%; }

.member .hideProcessBlock.center .processBox { background-color: inherit; width: 720px; max-height: 720px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden; opacity: 0; }

.member .hideProcessBlock.center .process { height: 100%; background-color: #fff; padding: 0; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.member .hideProcessBlock.center .process.getIn { position: relative; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); left: auto; top: auto; }

.member .hideProcessBlock.center .process.getOut { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.member .hideProcessBlock.center .waterBottle { padding: 100px 80px; height: calc(100% - 60PX); overflow-y: scroll; }

.member .hideProcessBlock.black .titleBox { color: #000; }

.member .hideProcessBlock .circleBtn { cursor: pointer; border-radius: 50%; border: solid 2px #000; width: 45px; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; right: 80px; top: 100px; }

.member .hideProcessBlock .useDefaultPic { cursor: pointer; color: #ffffff; font-size: 14px; font-size: 0.875rem; font-weight: 900; letter-spacing: 0.5px; margin: 0 auto 60px auto; text-align: center; }

.member .hideProcessBlock .useDefaultPic .text { border-bottom: solid 1px #fff; padding-bottom: 2px; display: inline-block; }

.member .hideProcessBlock .logInBtn { width: 100%; max-width: 480px; }

@media (max-width: 767px) { .member main { padding: 25vh 0 0 0; }
  .member .hideProcessBlock.center .processBox { width: 100vw; height: 100vh; }
  .member .hideProcessBlock.center .process { height: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .member .hideProcessBlock.center .waterBottle { overflow-y: scroll; min-height: calc(100% - 100px); -webkit-box-sizing: border-box; box-sizing: border-box; padding: 60px 40px 40px 40px; }
  .member .hideProcessBlock.center .titleBox { padding: 0; }
  .member .hideProcessBlock.center .infoBox { padding: 55px 0 0 0; }
  .member .hideProcessBlock.center .logInBtn { min-height: 100px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
  .member .hideProcessBlock .circleBtn { right: 20px; top: 20px; } }

@media (max-width: 374px) { .member .hideProcessBlock.center .waterBottle { padding: 60px 20px 40px 20px; } }

.memberBarney { margin: 0 0 90px 0; }

.memberBarney.show .title { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity 1.5s ease, -webkit-transform 1s ease; transition: opacity 1.5s ease, -webkit-transform 1s ease; -o-transition: opacity 1.5s ease, transform 1s ease; transition: opacity 1.5s ease, transform 1s ease; transition: opacity 1.5s ease, transform 1s ease, -webkit-transform 1s ease; }

.memberBarney.show .subTitle { opacity: 1; -webkit-transition: opacity 1.5s ease .5s; -o-transition: opacity 1.5s ease .5s; transition: opacity 1.5s ease .5s; }

.memberBarney.show .link { opacity: 1; }

.memberBarney .bBox1 { color: #000; text-align: center; margin: 0 0 35px 0; }

.memberBarney .title { font-size: 48px; font-size: 3rem; font-family: 'SegoeUISemibold','微軟正黑體'; letter-spacing: 0.5px; line-height: 1.6; margin: 0 0 10px 0; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.memberBarney .subTitle { font-size: 18px; font-size: 1.125rem; font-family: 'SegoeUISemibold','微軟正黑體'; letter-spacing: 0.5px; line-height: 1.6; opacity: 0; }

.memberBarney .bBox2 { color: #999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; width: 100%; }

.memberBarney .link { padding: 5px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; white-space: nowrap; opacity: 0; }

.memberBarney .link.now .text { color: #000; }

.memberBarney .link.now:after { width: 100%; }

.memberBarney .link:hover .text { color: #000; }

.memberBarney .link:hover:after { width: 100%; -webkit-transition: width .5s ease; -o-transition: width .5s ease; transition: width .5s ease; }

.memberBarney .link:after { content: ''; display: block; background-color: #000; width: 0; height: 5px; margin: 5px 0 0 0; }

.memberBarney .link .text { -webkit-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease; }

@media (max-width: 1023px) { .memberBarney .bBox2 { width: 80%; margin: 0 auto; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } }

.memberBtnBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.memberBtnBox .memberBtn .text { font-size: 14px; font-size: 0.875rem; font-weight: 900; letter-spacing: 0.5px; }

.logInBtn .btn { font-size: 14px; font-size: 0.875rem; font-weight: 900; width: calc(50% - 1px); height: 60px; }

.member[data-page=index] main { padding: 0; }

.member[data-page=index] .djLogo { color: #fff; margin: 0 0 155px 0; }

.member[data-page=index] .djLogo .bText { opacity: 0; height: 0; width: 0; }

.member[data-page=index] .logInBtn { width: 100%; max-width: 480px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.member[data-page=index] .logInBtn .btn { cursor: pointer; font-size: 14px; font-size: 0.875rem; font-weight: 900; width: calc(50% - 1px); height: 60px; letter-spacing: 0.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.member[data-page=index] .logInBtn .typeA { color: #fff; border: solid 1px #fff0ab; -webkit-box-sizing: border-box; box-sizing: border-box; }

.member[data-page=index] .logInBtn .typeB { color: #000; background-color: #fff0ab; }

@media (max-width: 767px) { .member[data-page=index] .djLogo { margin: 0 0 10vh 0; } }

@media (max-height: 680px) { .member[data-page=index] .djLogo { margin: 0 0 10vh 0; } }

.mRgisterBG { position: fixed; left: 0; top: 0; z-index: -1; }

.mRgisterBG .bgArea { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100vw; height: 100vh; }

.mRgisterView { width: 100vw; height: 100vh; padding: 4vw 6.3vw; -webkit-box-sizing: border-box; box-sizing: border-box; }

.mRgisterView .viewSec { width: 100%; position: relative; text-align: center; }

.mRgisterView .viewSec .closeBtn { cursor: pointer; color: #fff; border: solid 1px #fff; border-radius: 50%; width: 45px; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; right: 0; top: 0; opacity: 0; }

.mRgisterView .viewSec .closeBtn.show { opacity: 1; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }

.mRgisterView .djLogo { opacity: 0; }

.mRgisterView .djLogo.show { opacity: 1; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }

.mRgisterView .startBox { color: #fff0ab; margin: 0 auto; display: inline-block; }

.mRgisterView .startBox.show .info .title { opacity: 1; -webkit-transition: opacity 1.5s ease .5s; -o-transition: opacity 1.5s ease .5s; transition: opacity 1.5s ease .5s; }

.mRgisterView .startBox.show .info .subTitle { opacity: 1; -webkit-transition: opacity 1.5s ease .8s; -o-transition: opacity 1.5s ease .8s; transition: opacity 1.5s ease .8s; }

.mRgisterView .startBox.show .typeInput:after { width: 100%; left: 0; right: 0; -webkit-transition: all 1.5s ease .8s; -o-transition: all 1.5s ease .8s; transition: all 1.5s ease .8s; }

.mRgisterView .startBox.show .typeInput .keyin { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity 1.5s ease .8s, -webkit-transform 1.5s ease .5s; transition: opacity 1.5s ease .8s, -webkit-transform 1.5s ease .5s; -o-transition: opacity 1.5s ease .8s, transform 1.5s ease .5s; transition: opacity 1.5s ease .8s, transform 1.5s ease .5s; transition: opacity 1.5s ease .8s, transform 1.5s ease .5s, -webkit-transform 1.5s ease .5s; }

.mRgisterView .startBox.show .funcBtnArea .bBtn { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.5s ease 1.2s; transition: -webkit-transform 1.5s ease 1.2s; -o-transition: transform 1.5s ease 1.2s; transition: transform 1.5s ease 1.2s; transition: transform 1.5s ease 1.2s, -webkit-transform 1.5s ease 1.2s; }

.mRgisterView .startBox.show .funcBtnArea .aBtn { opacity: 1; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: opacity 1.5s ease 1s, -webkit-transform 1.5s ease 1s; transition: opacity 1.5s ease 1s, -webkit-transform 1.5s ease 1s; -o-transition: opacity 1.5s ease 1s, transform 1.5s ease 1s; transition: opacity 1.5s ease 1s, transform 1.5s ease 1s; transition: opacity 1.5s ease 1s, transform 1.5s ease 1s, -webkit-transform 1.5s ease 1s; }

.mRgisterView .info { margin: 0 0 40px 0; overflow: hidden; }

.mRgisterView .info .title { font-size: 36px; font-size: 2.25rem; font-weight: 900; font-family: 'SegoeUISemibold','微軟正黑體'; letter-spacing: 0.5px; line-height: 1.5; margin: 0 0 5px 0; opacity: 0; }

.mRgisterView .info .subTitle { font-size: 18px; font-size: 1.125rem; letter-spacing: 0.5px; line-height: 1.6; opacity: 0; }

.mRgisterView .typeInput { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 0 40px 0; position: relative; -ms-input-placeholder-color: #fff0ab; -ms-input-placeholder-letter-spacing: 0.5px; }

.mRgisterView .typeInput:after { content: ''; display: block; background-color: #fff0ab; width: 0; height: 1px; position: absolute; left: 50%; top: 50%; }

.mRgisterView .typeInput .keyin { color: #fff0ab; background-color: rgba(0, 0, 0, 0); border: none; width: 100%; padding: 26px 0; text-align: center; opacity: 0; }

.mRgisterView .typeInput .keyin:nth-child(1) { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.mRgisterView .typeInput .keyin:nth-child(2) { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }

.mRgisterView .typeInput ::-webkit-input-placeholder { color: #fff0ab; letter-spacing: 0.5px; opacity: 1; }

.mRgisterView .typeInput :-ms-input-placeholder { color: #fff0ab; letter-spacing: 0.5px; opacity: 1; }

.mRgisterView .typeInput ::-ms-input-placeholder { color: #fff0ab; letter-spacing: 0.5px; opacity: 1; }

.mRgisterView .typeInput ::placeholder { color: #fff0ab; letter-spacing: 0.5px; opacity: 1; }

.mRgisterView .typeInput ::-ms-input-placeholder { color: #fff0ab; letter-spacing: 0.5px; }

.mRgisterView .funcBtnArea { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.mRgisterView .funcBtnArea .aBtn { cursor: pointer; font-size: 14px; font-size: 0.875rem; font-weight: 900; letter-spacing: 0.5px; padding: 5px 0; opacity: 0; }

.mRgisterView .funcBtnArea .aBtn.register { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }

.mRgisterView .funcBtnArea .aBtn.forgot { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }

.mRgisterView .funcBtnArea .bBtn { color: #2d2d2d; background-color: #fff0ab; font-size: 14px; font-size: 0.875rem; font-weight: 900; border-radius: 50%; width: 86px; height: 86px; letter-spacing: 0.5px; margin: 0 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

@media (max-width: 1024px) and (max-height: 1366px) { .mRgisterView { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } }

@media (max-width: 767px) { .mRgisterView { height: auto; padding: 10vw 30px; }
  .mRgisterView .info .title { font-size: 32px; font-size: 2rem; }
  .mRgisterView .info .subTitle { font-size: 16px; font-size: 1rem; } }

@media (max-width: 374px) { .mRgisterView { padding: 10vh 6.3vw 15vh; }
  .mRgisterView .info .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }

@media (max-height: 680px) { .mRgisterView { height: auto; } }

.hideProcessBlock { width: 100vw; height: 100vh; position: fixed; right: 0; top: 0; z-index: -1; visibility: hidden; }

.hideProcessBlock.see { z-index: 4; visibility: visible; }

.hideProcessBlock.see .bg { background-color: rgba(0, 0, 0, 0.8); -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; }

.hideProcessBlock.see .processBox { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: -webkit-transform .5s ease .3s; transition: -webkit-transform .5s ease .3s; -o-transition: transform .5s ease .3s; transition: transform .5s ease .3s; transition: transform .5s ease .3s, -webkit-transform .5s ease .3s; }

.hideProcessBlock.noSee .bg { background-color: rgba(0, 0, 0, 0); -webkit-transition: background-color .5s ease .3s; -o-transition: background-color .5s ease .3s; transition: background-color .5s ease .3s; }

.hideProcessBlock.noSee .processBox { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; }

.hideProcessBlock.mSelfie .selfieBox { cursor: pointer; width: 240px; height: 240px; margin: 0 auto 45px auto; position: relative; }

.hideProcessBlock.mSelfie .selfieBox .uploadInput { cursor: pointer; width: 100%; height: 100%; z-index: 1; }

.hideProcessBlock.mSelfie .selfieBox .imgFrame { height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }

.hideProcessBlock.mSelfie .selfieBox .imgFrame:after { content: ''; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; border: solid 4px #fff; width: 240px; height: 240px; position: absolute; left: 0; top: 0; }

.hideProcessBlock.mSelfie .selfieBox .icon { color: #232323; background-color: #fff0ab; font-size: 25px; font-size: 1.5625rem; border-radius: 50%; width: 60px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; right: 0; bottom: 0; }

.hideProcessBlock.mSelfie .infoBox { color: #fff; font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; text-align: center; width: 480px; margin: 0 auto 25px auto; }

.hideProcessBlock.mSelfie .infoBox .text { line-height: 1.6; }

.hideProcessBlock .bg { background-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.hideProcessBlock .processBox { background-color: #151515; width: 50%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); overflow-y: scroll; }

.hideProcessBlock .process { width: 100%; height: 0; padding: 20px 0; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; visibility: hidden; }

.hideProcessBlock .process.getIn { height: initial; min-height: 100%; opacity: 1; visibility: visible; -webkit-transition: opacity 1s ease, visibility 1s ease; -o-transition: opacity 1s ease, visibility 1s ease; transition: opacity 1s ease, visibility 1s ease; }

.hideProcessBlock .process.getOut { z-index: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity .5s ease, visibility .5s ease; -o-transition: opacity .5s ease, visibility .5s ease; transition: opacity .5s ease, visibility .5s ease; }

.hideProcessBlock .titleBox { color: #fff; text-align: center; }

.hideProcessBlock .titleBox .title { font-size: 36px; font-size: 2.25rem; font-family: 'SegoeUISemibold','微軟正黑體'; line-height: 1.6; margin: 0 0 10px 0; letter-spacing: 0.5px; }

.hideProcessBlock .titleBox .title .ch { font-size: 30px; font-size: 1.875rem; }

.hideProcessBlock .titleBox .subTitle { font-size: 18px; font-size: 1.125rem; font-family: 'SegoeUISemibold','微軟正黑體'; line-height: 1.6; margin: 0 0 40px 0; letter-spacing: 0.5px; }

.hideProcessBlock .titleBox .text { font-size: 14px; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.5px; }

.hideProcessBlock .find .boxWidth { width: 63%; margin: 0 auto 60px auto; }

.hideProcessBlock .register .boxWidth { width: 70%; margin: 0 auto 60px auto; }

.hideProcessBlock .register .logInBtn { position: relative; }

.hideProcessBlock .register .logInBtn.block:after { content: ''; display: block; width: 50%; height: 100%; position: absolute; right: 0; top: 0; }

.hideProcessBlock .reForm { color: #fff; }

.hideProcessBlock .reForm .chrisSelect { width: 50%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }

.hideProcessBlock .reForm .chrisSelect .dropShow { width: 100%; }

.hideProcessBlock .reForm .chrisSelect .dropList { width: 120%; z-index: 1; }

.hideProcessBlock .reForm .chrisSelect .dropList .character { font-size: 14px; font-size: 0.875rem; }

.hideProcessBlock .reForm .chrisSelect .list { background-color: #2d2d2d; }

.hideProcessBlock .reForm .chrisSelect .list:hover { background-color: #5d5d5d; }

.hideProcessBlock .reForm .sec1 { margin: 0 0 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.hideProcessBlock .reForm .sec1 .w_50 { width: calc(50% - 1px); }

.hideProcessBlock .reForm .sec2 { margin: 0 0 20px 0; }

.hideProcessBlock .reForm .sec3 { margin: 0 0 45px 0; }

.hideProcessBlock .reForm .termsBox { text-align: center; }

.hideProcessBlock .reForm .termsBox .termsOpenBtn { cursor: pointer; border-bottom: solid 1px #fff; margin: 0 0 18px 0; display: inline-block; }

.hideProcessBlock .reForm .termsBox .text { font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; line-height: 1.6; }

.hideProcessBlock .reForm .agreeBox { color: #707070; text-align: center; margin: 0 0 60px 0; }

.hideProcessBlock .reForm .agreeBox.yesAgree { color: #fff0ab; }

.hideProcessBlock .reForm .agreeBox.yesAgree .iconBox { background-color: #fff0ab; }

.hideProcessBlock .reForm .agreeBox .iconBox { background-color: #707070; border-radius: 50%; width: 30px; height: 30px; margin: 0 auto 10px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.hideProcessBlock .reForm .agreeBox .iconBox .icon { color: #2d2d2d; }

.hideProcessBlock .reForm .agreeBox .text { font-size: 12px; font-size: 0.75rem; font-weight: 900; font-family: 'SegoeUISemibold','微軟正黑體'; letter-spacing: 0.5px; }

.hideProcessBlock .reForm .box { background-color: #2d2d2d; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 0 25px; margin: 0 0 2px 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

.hideProcessBlock .reForm .box input { color: #fff; border: none; width: 100%; height: 50px; background-color: rgba(0, 0, 0, 0); }

.hideProcessBlock .reForm .box .code { width: auto; max-width: 50px; }

.hideProcessBlock .reForm .label { display: -webkit-box; display: -ms-flexbox; display: flex; white-space: nowrap; }

.hideProcessBlock .reForm .label .star { margin-right: 8px; }

.hideProcessBlock .reForm .label .en { font-size: 14px; font-size: 0.875rem; font-weight: 900; margin-right: 8px; letter-spacing: 0.5px; }

.hideProcessBlock .reForm .label .ch { font-size: 14px; font-size: 0.875rem; font-weight: 900; margin-right: 8px; letter-spacing: 0.5px; }

.hideProcessBlock .confirm .boxWidth { width: 69%; margin: 0 auto 75px auto; }

.hideProcessBlock .veForm { width: 100%; margin: 0 auto 75px auto; -ms-input-placeholder-color: #fff0ab; -ms-input-placeholder-letter-spacing: 0.5px; }

.hideProcessBlock .veForm .verification { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.hideProcessBlock .veForm .verification li { width: calc(100% / 6); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.hideProcessBlock .veForm .verification .text { color: #fff0ab; background-color: rgba(0, 0, 0, 0); font-size: 48px; font-size: 3rem; width: 100%; text-align: center; margin: 0 12px; border: none; border-bottom: solid 3px #fff0ab; }

.hideProcessBlock .veForm ::-webkit-input-placeholder { color: #fff0ab; opacity: 1; }

.hideProcessBlock .veForm :-ms-input-placeholder { color: #fff0ab; opacity: 1; }

.hideProcessBlock .veForm ::-ms-input-placeholder { color: #fff0ab; opacity: 1; }

.hideProcessBlock .veForm ::placeholder { color: #fff0ab; opacity: 1; }

.hideProcessBlock .veForm ::-ms-input-placeholder { color: #fff0ab; letter-spacing: 0.5px; }

.hideProcessBlock .verifiTime { color: #fff; text-align: center; margin: 0 0 60px 0; }

.hideProcessBlock .verifiTime .text { font-size: 18px; font-size: 1.125rem; line-height: 1.6; letter-spacing: 0.5px; margin: 0 0 25px 0; }

.hideProcessBlock .verifiTime .countdown { font-size: 36px; font-size: 2.25rem; margin: 0 0 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.hideProcessBlock .verifiTime .reSent { cursor: pointer; color: #fff0ab; font-weight: 900; border-bottom: solid 1px #fff0ab; display: inline-block; }

.hideProcessBlock .verifiTime .reSent .text { font-size: 14px; font-size: 0.875rem; margin: 0; }

.hideProcessBlock .success .boxWidth { width: 69%; margin: 0 auto; }

.hideProcessBlock .success .titleBox { margin: 0 auto 50px auto; }

@media (max-width: 1700px) { .hideProcessBlock .register .boxWidth { width: 80%; } }

@media (max-width: 1500px) { .hideProcessBlock .processBox { width: 65%; } }

@media (max-width: 1366px) { .hideProcessBlock .processBox { width: 75%; } }

@media (max-width: 1024px) { .hideProcessBlock .processBox { width: 85%; } }

@media (max-width: 1023px) { .hideProcessBlock .processBox { width: 100%; } }

@media (max-width: 767px) { .hideProcessBlock.mSelfie .infoBox { width: 100%; }
  .hideProcessBlock.mSelfie .selfieBox { width: 60vw; height: 60vw; max-width: 240px; max-height: 240px; }
  .hideProcessBlock .find .boxWidth { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .hideProcessBlock .success .boxWidth { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .hideProcessBlock .confirm .boxWidth { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .hideProcessBlock .veForm .verification .text { margin: 0 6px; }
  .hideProcessBlock .register .boxWidth { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .hideProcessBlock .reForm .box { padding: 10px 15px 0 15px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .hideProcessBlock .reForm .box input { height: 30px; }
  .hideProcessBlock .reForm .box .code { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
  .hideProcessBlock .reForm .label { width: 100%; }
  .hideProcessBlock .reForm .sec1 .w_50 { width: 100%; }
  .hideProcessBlock .reForm .chrisSelect { width: 100%; height: 50px; }
  .hideProcessBlock .reForm .chrisSelect .showBox { width: 100%; }
  .hideProcessBlock .reForm .chrisSelect .dropList { width: 100%; }
  .hideProcessBlock .process { padding: 20px 6%; } }

@media (max-width: 374px) { .hideProcessBlock .register .boxWidth { width: 100%; padding: 0 20px; }
  .hideProcessBlock .reForm .label .en { font-size: 13px; font-size: 0.8125rem; }
  .hideProcessBlock .reForm .label .ch { font-size: 13px; font-size: 0.8125rem; } }

.mForgotProcess .reForm .sec1 { margin: 0 0 60px 0; }

.mForgotProcess .success .boxWidth { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberTermService { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: -1; visibility: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberTermService.see { z-index: 1; visibility: visible; }

.memberTermService.see .bg { background-color: rgba(0, 0, 0, 0.8); -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; }

.memberTermService.see .termSec:before, .memberTermService.see .termSec:after { -webkit-transition: -webkit-transform .5s ease .3s; transition: -webkit-transform .5s ease .3s; -o-transition: transform .5s ease .3s; transition: transform .5s ease .3s; transition: transform .5s ease .3s, -webkit-transform .5s ease .3s; }

.memberTermService.see .termSec:before { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }

.memberTermService.see .termSec:after { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }

.memberTermService.noSee .bg { background-color: rgba(0, 0, 0, 0); -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; }

.memberTermService.noSee .termSec { opacity: 0; -webkit-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; }

.memberTermService .bg { background-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; }

.memberTermService .termSec { background-color: #fff; width: 100%; height: 100%; max-width: 900px; max-height: 80vh; padding: 75px 50px 0 50px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; overflow: hidden; }

.memberTermService .termSec:before, .memberTermService .termSec:after { content: ''; display: block; background-color: black; width: 50%; height: 100%; position: absolute; top: 0; z-index: 1; }

.memberTermService .termSec:before { left: 0; }

.memberTermService .termSec:after { right: 0; }

.memberTermService .termBox { height: 100%; position: relative; }

.memberTermService .termBox .crossBtn { border-radius: 50%; border: solid 2px #000; width: 45px; height: 45px; position: absolute; right: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberTermService .titleBox { text-align: center; margin: 0 0 40px 0; }

.memberTermService .titleBox .title { font-size: 30px; font-size: 1.875rem; font-family: 'SegoeUISemibold','微軟正黑體'; line-height: 1.6; }

.memberTermService .titleBox .subTitle { font-size: 18px; font-size: 1.125rem; font-family: 'SegoeUISemibold','微軟正黑體'; line-height: 1.6; }

.memberTermService .allTerm { border-top: solid 2px #e1e1e1; padding: 40px 0 40px 0; height: calc(100% - 215px); -webkit-box-sizing: border-box; box-sizing: border-box; }

.memberTermService .allTerm .termList { margin: 0 0 60px 0; }

.memberTermService .allTerm .termList .listBox .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }

.memberTermService .allTerm .termList .listBox .number { margin-right: 10px; }

.memberTermService .allTerm .termList .listBox .text { margin: 0; }

.memberTermService .allTerm .title { font-size: 18px; font-size: 1.125rem; font-weight: 900; letter-spacing: 0.5px; line-height: 1.6; margin: 0 0 40px 0; }

.memberTermService .allTerm .text { font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; line-height: 1.6; margin: 0 0 40px 0; }

.memberTermService .allTerm .text:last-child { margin: 0; }

.memberTermService .btnBox { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.memberTermService .btnBox .btn { cursor: pointer; font-size: 14px; font-size: 0.875rem; font-weight: 900; letter-spacing: 0.5px; width: calc(50% - 1px); padding: 0 12px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberTermService .btnBox .btn .text { line-height: 1.6; text-align: center; }

.memberTermService .btnBox .typeA { color: #000; background-color: #f3f3f3; }

.memberTermService .btnBox .typeB { color: #fff; background-color: #232323; }

@media (max-width: 1023px) { .memberTermService .termSec { width: 88%; max-width: none; }
  .memberTermService .termBox .crossBtn { position: relative; margin: 0 auto 30px auto; } }

@media (max-width: 767px) { .memberTermService { height: 100%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .memberTermService .termSec { width: 100%; max-height: none; padding: 20px 25px 0px 25px; height: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .memberTermService .termBox { height: 100%; }
  .memberTermService .termBox .crossBtn { margin: 0 auto 20px auto; }
  .memberTermService .titleBox { margin: 0 0 20px 0; }
  .memberTermService .titleBox .title { font-size: 26px; font-size: 1.625rem; line-height: 1.3; margin-bottom: 10px; }
  .memberTermService .allTerm { padding: 20px 0; -webkit-box-sizing: border-box; box-sizing: border-box; height: calc(100% - 250px); }
  .memberTermService .allTerm .termList { margin: 0; } }

.memberCloseConfirm { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: -1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberCloseConfirm.show { z-index: 4; }

.memberCloseConfirm.show .box { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform .8s ease; transition: -webkit-transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; transition: transform .8s ease, -webkit-transform .8s ease; }

.memberCloseConfirm .box { border-radius: 50%; background-color: #feefaa; width: 380px; height: 380px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

.memberCloseConfirm .box .text { margin: 0 0 50px 0; }

.memberCloseConfirm .box .logInBtn { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberCloseConfirm .box .logInBtn .btn { color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 40%; margin: 0 1px; }

.memberCloseConfirm .box .logInBtn .typeA { color: #7f7755; border-bottom: solid 4px #7f7755; }

.memberCloseConfirm .box .logInBtn .typeB { border-bottom: solid 4px #000; }

.memberCloseConfirm .box .logInBtn .text { margin: 0; }

@media (max-width: 1023px) { .memberCloseConfirm { display: none; } }

.member[data-page=memberGuide] .headerLogo { color: #000; background-color: #fff; }

.member[data-page=memberGuide] .headerMixBtn { color: #fff; }

.member[data-page=memberGuide] .headerMixBtn .list:after { background-color: #fff; }

.member[data-page=memberGuide] .headerMenu { color: #fff; }

.member[data-page=memberGuide] .headerMenu .humburger .line { background-color: #fff; }

.member[data-page=memberGuide] .backToTopBtn { color: #fff; border-color: #fff; }

.member[data-page=memberGuide] .memberBarney .bBox1 { color: #fff; }

.member[data-page=memberGuide] .memberBarney .link.now .text { color: #fff; }

.member[data-page=memberGuide] .memberBarney .link:hover .text { color: #fff; }

.member[data-page=memberGuide] .memberBarney .link:after { background-color: #fff0ab; }

.memberWelcome { margin: 0 0 20px 0; }

.memberWelcome .imgFrame { overflow: hidden; border: solid 4px #fff; border-radius: 50%; width: 156px; height: 156px; margin: 0 auto 30px auto; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

.memberWelcome .imgFrame.show { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.5s ease .5s; transition: -webkit-transform 1.5s ease .5s; -o-transition: transform 1.5s ease .5s; transition: transform 1.5s ease .5s; transition: transform 1.5s ease .5s, -webkit-transform 1.5s ease .5s; }

.memberWelcome .titleBox { color: #fff; letter-spacing: 0.5px; text-align: center; }

.memberWelcome .titleBox.show .title { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity 1.5s ease, -webkit-transform 1s ease; transition: opacity 1.5s ease, -webkit-transform 1s ease; -o-transition: opacity 1.5s ease, transform 1s ease; transition: opacity 1.5s ease, transform 1s ease; transition: opacity 1.5s ease, transform 1s ease, -webkit-transform 1s ease; }

.memberWelcome .titleBox.show .subTitle { opacity: 1; -webkit-transition: opacity 1.5s ease .5s; -o-transition: opacity 1.5s ease .5s; transition: opacity 1.5s ease .5s; }

.memberWelcome .titleBox .title { font-size: 36px; font-size: 2.25rem; font-family: 'SegoeUISemibold','微軟正黑體'; line-height: 1.6; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); }

.memberWelcome .titleBox .subTitle { font-size: 18px; font-size: 1.125rem; font-family: 'SegoeUISemibold','微軟正黑體'; line-height: 1.6; opacity: 0; }

.memberGuideBlock { width: 68%; margin: 0 auto 60px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.memberGuideBlock .block { width: 33.4vw; height: 33.4vw; padding: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; }

.memberGuideBlock .block.show { opacity: 1; -webkit-transition: opacity 1.5s ease; -o-transition: opacity 1.5s ease; transition: opacity 1.5s ease; }

.memberGuideBlock .block.show .square { opacity: 1; -webkit-transition: opacity 1.5s ease 1s; -o-transition: opacity 1.5s ease 1s; transition: opacity 1.5s ease 1s; }

.memberGuideBlock .block:nth-child(2n+1) .tipMessage { left: 50px; }

.memberGuideBlock .block:nth-child(2n+1) .tipMessage:after { left: -14px; border-width: 8px 13.9px 8px 0; border-color: transparent #2b2b2b transparent transparent; }

.memberGuideBlock .block:nth-child(2n) .tipMessage { right: 50px; }

.memberGuideBlock .block:nth-child(2n) .tipMessage:after { right: -14px; border-width: 8px 0 8px 13.9px; border-color: transparent transparent transparent #2b2b2b; }

.memberGuideBlock .block .tipMessage { color: #fff; background-color: #2b2b2b; width: 640px; position: absolute; top: 50%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 2vw; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: 0.5px; }

.memberGuideBlock .block .tipMessage.show { z-index: 1; opacity: 1; visibility: visible; }

.memberGuideBlock .block .tipMessage:after { content: ''; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.memberGuideBlock .block .tipMessage .box { min-height: 220px; padding: 0 40px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.memberGuideBlock .block .tipMessage .closeBtn { color: #f8e9a6; border-radius: 50%; border: solid 2px #f8e9a6; width: 35px; height: 35px; margin: 0 0 20px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberGuideBlock .block .tipMessage .title { font-size: 18px; font-size: 1.125rem; font-weight: 900; line-height: 1.6; margin: 0 0 30px 0; }

.memberGuideBlock .block .tipMessage .text { font-size: 12px; font-size: 0.75rem; line-height: 1.6; }

.memberGuideBlock .blockBox { width: 100%; height: 100%; position: relative; padding: 10%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.memberGuideBlock .square { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; }

.memberGuideBlock .square .head { position: absolute; left: 0; top: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }

.memberGuideBlock .square .head .tipBox { margin-left: auto; position: relative; }

.memberGuideBlock .square .head .tipBox .bg { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; display: none; }

.memberGuideBlock .square .head .tipBox .tipIcon { border: solid 2px #000; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; width: 25px; height: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberGuideBlock .square .head .tipBox .tipIcon:hover { color: #fff; background-color: #000; }

.memberGuideBlock .square .head .titleBox { padding-right: 40px; letter-spacing: 0.5px; }

.memberGuideBlock .square .head .titleBox .title { font-size: 30px; font-size: 1.875rem; line-height: 1.6; }

.memberGuideBlock .square .head .titleBox .subTitle { font-size: 18px; font-size: 1.125rem; line-height: 1.6; }

.memberGuideBlock .square .body { width: 100%; }

.memberGuideBlock .square .typeA { width: 320px; }

.memberGuideBlock .square .typeA .list { display: -webkit-box; display: -ms-flexbox; display: flex; letter-spacing: 0.5px; padding: 20px 0; position: relative; }

.memberGuideBlock .square .typeA .list:last-child:after { display: none; }

.memberGuideBlock .square .typeA .list:after { content: ''; display: block; background-color: #000; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; }

.memberGuideBlock .square .typeA .item { font-size: 18px; font-size: 1.125rem; font-weight: 900; width: 35%; padding-right: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1.6; }

.memberGuideBlock .square .typeA .name { font-size: 16px; font-size: 1rem; width: 65%; padding-left: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: right; line-height: 1.6; }

.memberGuideBlock .square .typeB .slickBox { width: 150px; margin: 0 auto; }

.memberGuideBlock .square .typeB .slickBox.init .img { opacity: 1; }

.memberGuideBlock .square .typeB .slickBox .img { opacity: 0; }

.memberGuideBlock .square .typeB .slick-dots { bottom: -40px; }

.memberGuideBlock .square .typeB .slick-dots li button { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); }

.memberGuideBlock .square .typeB .imgFrame { overflow: hidden; border-radius: 50%; width: 150px; height: 150px; }

.memberGuideBlock .square .typeB .img { width: auto; }

.memberGuideBlock .square .typeC span { display: block; }

.memberGuideBlock .square .typeC .redPointBox { text-align: center; margin: 0 0 25px 0; }

.memberGuideBlock .square .typeC .redPointBox .point { font-size: 48px; font-size: 3rem; margin: 0 0 5px 0; }

.memberGuideBlock .square .typeC .redPointBox .text { font-size: 14px; font-size: 0.875rem; font-family: 'SegoeUISemibold','微軟正黑體'; letter-spacing: 0.5px; line-height: 1.6; }

.memberGuideBlock .square .typeC .dateBox { font-size: 18px; font-size: 1.125rem; font-weight: 900; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberGuideBlock .square .typeC .dash { margin: 0 8px; }

.memberGuideBlock .square .typeD { width: 320px; }

.memberGuideBlock .square .typeD .list { cursor: pointer; padding: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; }

.memberGuideBlock .square .typeD .list:last-child:after { display: none; }

.memberGuideBlock .square .typeD .list:after { content: ''; display: block; background-color: #000; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; }

.memberGuideBlock .square .typeD .item { margin-right: auto; }

.memberGuideBlock .link { color: #fff; background-color: #000; position: absolute; right: 0; bottom: 0; width: 11.5%; height: 11.5%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberGuideBlock .link .icon { font-size: 20px; font-size: 1.25rem; }

@media (max-width: 1500px) { .memberGuideBlock .square .head .titleBox .title { font-size: 28px; font-size: 1.75rem; } }

@media (max-width: 1366px) { .memberGuideBlock { width: 76%; }
  .memberGuideBlock .block { width: 37vw; height: 37vw; }
  .memberGuideBlock .block .tipMessage { width: 50vw; }
  .memberGuideBlock .square .head .titleBox .title { font-size: 26px; font-size: 1.625rem; } }

@media (max-width: 1200px) { .memberGuideBlock { width: 86%; }
  .memberGuideBlock .block { width: 42vw; height: 42vw; } }

@media (max-width: 1024px) { .memberGuideBlock { width: 94%; }
  .memberGuideBlock .block { width: 46vw; height: 46vw; padding: 30px; }
  .memberGuideBlock .blockBox { padding: 8%; } }

@media (max-width: 900px) { .memberGuideBlock { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .memberGuideBlock .block { width: 80%; height: 500px; }
  .memberGuideBlock .block .tipMessage { position: fixed; left: 50% !important; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .memberGuideBlock .block .tipMessage:after { display: none; } }

@media (max-width: 767px) { .memberGuideBlock { width: 100%; }
  .memberGuideBlock .link { width: 60px; height: 60px; }
  .memberGuideBlock .block { width: 100%; height: 450px; }
  .memberGuideBlock .block .tipMessage { width: 70vw; }
  .memberGuideBlock .block .tipMessage .bg { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; }
  .memberGuideBlock .square .head .tipBox .bg.show { display: block; }
  .memberGuideBlock .square .typeA .item { width: 50%; }
  .memberGuideBlock .square .typeA .name { width: 50%; } }

@media (max-width: 414px) { .memberGuideBlock .block .tipMessage { width: 88vw; padding: 4vw; }
  .memberGuideBlock .block .tipMessage .box { padding: 0 20px; } }

.member[data-page=memberAccount] .chrisSelect .text { font-size: 14px; font-size: 0.875rem; font-weight: 900; }

.member[data-page=memberAccount] .chrisSelect .dropShow { padding: 25px 0; }

.member[data-page=memberAccount] .chrisSelect .dropShow .icon { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.member[data-page=memberAccount] .chrisSelect .dropList { height: auto; max-height: 250px; z-index: 1; }

.memberAccManage { width: 1200px; margin: 0 auto; }

.memberAccManage .accSec { border-bottom: solid 4px #000; }

.memberAccManage .accSec:first-child { border-top: solid 4px #000; }

.memberAccManage .accSec.last { margin: 0 0 95px 0; }

.memberAccManage .accSec .bacon { width: 100%; padding: 60px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-bottom: solid 1px #000000; }

.memberAccManage .accSec .bacon:last-child { border-bottom: none; }

.memberAccManage .accSec .bacon.show .left { opacity: 1; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; }

.memberAccManage .accSec .bacon.show .right { opacity: 1; -webkit-transition: opacity 1s ease .5s; -o-transition: opacity 1s ease .5s; transition: opacity 1s ease .5s; }

.memberAccManage .accSec .left { width: 50%; padding-right: 120px; opacity: 0; }

.memberAccManage .accSec .right { width: 50%; padding-right: 120px; opacity: 0; }

.memberAccManage .sec { -webkit-box-sizing: border-box; box-sizing: border-box; }

.memberAccManage .sec .textBox { font-size: 14px; font-size: 0.875rem; letter-spacing: 0.5px; margin: 0 0 60px 0; }

.memberAccManage .sec .textBox .text { line-height: 1.6; margin: 0 0 25px 0; }

.memberAccManage .sec .textBox .text:last-child { margin: 0; }

.memberAccManage .sec .selfie { cursor: pointer; position: relative; display: inline-block; }

.memberAccManage .sec .selfie .imgFrame { overflow: hidden; border: solid 4px #fff; border-radius: 50%; -webkit-box-shadow: 0 0 10px 5px #dfdfdf; box-shadow: 0 0 10px 5px #dfdfdf; width: 156px; height: 156px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberAccManage .sec .selfie .icon { color: #fff0ab; background-color: #151515; border-radius: 50%; width: 45px; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; right: 0; bottom: 0; }

.memberAccManage .sec .titleBox { letter-spacing: 0.5px; margin: 0 0 35px 0; }

.memberAccManage .sec .titleBox .title { font-size: 24px; font-size: 1.5rem; font-weight: 900; line-height: 1.6; }

.memberAccManage .sec .titleBox .subTitle { font-size: 18px; font-size: 1.125rem; line-height: 1.6; }

.memberAccManage .sec .formBox { letter-spacing: 0.5px; margin: 0 0 35px 0; }

.memberAccManage .sec .formBox:last-child { margin: 0; }

.memberAccManage .sec .formBox input { border: none; }

.memberAccManage .sec .formBox .list { border-bottom: solid 1px #ccc; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.memberAccManage .sec .formBox .list:last-child { border-bottom: none; }

.memberAccManage .sec .formBox .list.verifiCode .code { width: auto; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.memberAccManage .sec .formBox .list.verifiCode .answer { padding-right: 80px; }

.memberAccManage .sec .formBox .title { font-size: 14px; font-size: 0.875rem; font-weight: 900; width: 46%; }

.memberAccManage .sec .formBox .title .en { margin-right: 10px; }

.memberAccManage .sec .formBox .answer { width: 54%; padding: 25px 0; }

.memberAccManage .sec .formBox .answer.super { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.memberAccManage .sec .formBox .answer.hyper { padding: 0; }

.memberAccManage .sec .formBox .answer .chrisRadio { font-size: 14px; font-size: 0.875rem; font-weight: 900; width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.memberAccManage .sec .ham { border-bottom: solid 1px #000; padding: 60px 0; }

.memberAccManage .sec .ham:first-child { padding-top: 0; }

.memberAccManage .sec .ham:last-child { border-bottom: none; padding-bottom: 0; }

.memberAccManage .sec .ham .textBox .title { font-size: 14px; font-size: 0.875rem; font-weight: 900; line-height: 1.6; margin: 0 0 15px 0; }

.memberAccManage .sec .memberBtnBox { margin: 0; }

.memberAccManage .sec1 .left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.memberAccManage .sec1 .left .titleBox { margin: 0; }

.memberAccManage .sec1 .selfie { margin-right: 45px; }

.memberAccManage .memberBtnBox { margin: 0 0 95px 0; }

.memberAccManage .memberBtnBox.show .memberBtn { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: opacity 1.5s ease, -webkit-transform 1.3s ease .2s; transition: opacity 1.5s ease, -webkit-transform 1.3s ease .2s; -o-transition: transform 1.3s ease .2s, opacity 1.5s ease; transition: transform 1.3s ease .2s, opacity 1.5s ease; transition: transform 1.3s ease .2s, opacity 1.5s ease, -webkit-transform 1.3s ease .2s; }

.memberAccManage .memberBtnBox.two { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.memberAccManage .memberBtnBox.two .memberBtn { width: calc(180px - 1px); margin: 0 1px; }

.memberAccManage .memberBtnBox .memberBtn { width: 360px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }

@media (max-width: 1366px) { .memberAccManage { width: 88%; }
  .memberAccManage .accSec .left, .memberAccManage .accSec .right { padding-right: 60px; } }

@media (max-width: 1200px) { .memberAccManage .accSec .left { padding-right: 40px; }
  .memberAccManage .accSec .right { padding-right: 30px; } }

@media (max-width: 1023px) { .memberAccManage { width: 70%; }
  .memberAccManage .accSec .bacon { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .memberAccManage .accSec .left, .memberAccManage .accSec .right { width: 100%; padding: 0; }
  .memberAccManage .sec1 .left { margin: 0 0 40px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } }

@media (max-width: 767px) { .memberAccManage { width: 88%; }
  .memberAccManage .sec .titleBox { text-align: center; }
  .memberAccManage .sec .formBox .list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 10px; }
  .memberAccManage .sec .formBox .list:first-child { padding-top: 0; }
  .memberAccManage .sec .formBox .title { width: 100%; }
  .memberAccManage .sec .formBox .answer { width: 100%; padding: 15px 0; }
  .memberAccManage .sec1 .left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .memberAccManage .sec1 .selfie { margin: 0 0 45px 0; } }

.memberAccBill .dateBlock { margin: 0 0 100px 0; }

.memberAccBill .dateBlock .item { font-size: 14px; font-size: 0.875rem; font-weight: 900; letter-spacing: 0.5px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 195px; height: 60px; margin: 0 3px; }

.memberAccBill .dateBlock .item.now { color: #fff; background-color: #333333; border-color: #333333; }

.memberAccBill .detailList { border-top: solid 3px #111111; border-bottom: solid 3px #111111; width: 62.5%; min-width: 1200px; margin: 0 auto 100px auto; }

.memberAccBill .detailList .list { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; border-bottom: solid 1px #000; }

.memberAccBill .detailList .list:last-child { border-bottom: none; }

.memberAccBill .detailList .numberBox { -webkit-box-sizing: border-box; box-sizing: border-box; width: 200px; padding: 60px 0 0 60px; }

.memberAccBill .detailList .numberBox .text { font-size: 36px; font-size: 2.25rem; font-family: 'SegoeUISemibold','微軟正黑體'; }

.memberAccBill .detailList .infoBox { -webkit-box-sizing: border-box; box-sizing: border-box; width: 600px; margin: 60px 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.memberAccBill .detailList .infoBox .item { width: 33.33%; letter-spacing: 0.5px; margin: 0 0 60px 0; }

.memberAccBill .detailList .infoBox .item .title { font-size: 12px; font-size: 0.75rem; line-height: 1.6; margin: 0 0 5px 0; }

.memberAccBill .detailList .infoBox .item .name { font-size: 16px; font-size: 1rem; font-weight: 900; line-height: 1.6; }

.memberAccBill .detailList .btnBox { -webkit-box-sizing: border-box; box-sizing: border-box; width: 400px; padding: 0 120px 0 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.memberAccBill .detailList .btnBox .btn { font-size: 14px; font-size: 0.875rem; font-weight: 900; letter-spacing: 0.5px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 180px; height: 50px; margin: 0 0 2px 0; }

.memberAccBill .detailList .btnBox .btn:last-child { margin: 0; }

/*# sourceMappingURL=style.css.map */