@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
/*---DEFAULT---*/
html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body { background:#8D252D; }
body, th, td, input { font-size: 100%; }
a { text-decoration: none; }
p { font-size: 1em; line-height: 1.8em; margin-bottom: 1em; color: #333; }
li { font-size: 1em; line-height: 1.8em; color: #333; }
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
h1 { font-size: 2.142em; line-height: 1.1333em; margin-bottom: .2666em; }
h2 { font-size: 1.714em; line-height: 1.1666em; margin-bottom: .4555em; }
h3 { font-size: 1.429em; line-height: 1.4em; margin-bottom: .4em; }
h4 { font-size: 1.143em; line-height: 1.5em; margin-bottom: .4555em; }
h5 { font-size: 1em; line-height: 1.5em; margin-bottom: .5em; }
h6 { font-size: 0.857em; line-height: 1.5em; margin-bottom: .4555em; text-transform: uppercase; }

a:link, a:visited { text-decoration: none;}
::selection { background: #222; color: #FFF;}
	/*SCROLL BAR*/
	body.pc::-webkit-scrollbar{ width:8px; }
	body.pc::-webkit-scrollbar-track{ background:#f1f1f1;}
	body.pc::-webkit-scrollbar-thumb{ background:#bf463e; }
	body.pc::-webkit-scrollbar-thumb:hover{ background:#222; }

@media only screen and (max-width: 576px) {
	p,li { font-size: 15px; }
}
/*------*/

/*---IMG LOAD---*/
.imgLiquidCenter, .imgLiquidFill{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
.imgLiquidCenter img, .imgLiquidFill img{ display: none;}
.imgLiquid_ready { opacity: 1; }
div.lazy{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
div.lazy.imgLiquid_ready{ opacity: 1;}
img.lazy{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
img.lazy.ed{ opacity: 1;}
/*------*/

/*---ELEMENT---*/
.ie { position: fixed; width: 100%; height: 100%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #f2f2f2; z-index: 9999; }
.ie .title { color: #333 !important; font-size: 2em; margin-bottom: 20px;}
.ie p { text-align: center; color: #333 !important; font-size: 0.95em; }
.ie a { color: #F36; }
/*------*/

/*---loading_box---*/
.loading_box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999;}
.loading_box::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;  background: url(../images/loading.gif) no-repeat center center; background-size: 60px; }
.loading_box::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background:#97363D url(../images/bg_1.png) repeat;}
.loading_box .icon{ width: 40px; }
.loading_box .icon img{ display: block; width: 100%;}
/*------*/

/* =============================================================================
   BASIC END
   ========================================================================== */


/* =============================================================================
   MODULE
   ========================================================================== */

/*---page width---*/
.inner-width { position: relative; max-width:1200px; margin: auto;}
.txt-width { position: relative; max-width:1000px; margin: auto; }
@media only screen and (max-width: 1280px) {
	.inner-width { max-width: calc(100% - 80px); margin: 0 40px;}
}
@media only screen and (max-width: 992px) {
	.txt-width { margin: 0 40px;}
}
@media only screen and (max-width: 576px) {
	.inner-width { max-width: calc(100% - 40px); margin: 0 20px;}
	.txt-width { margin: 0 20px;}
}
/*------*/

/* =============================================================================
   MODULE END
   ========================================================================== */

/* =============================================================================
   BLOCK
   ========================================================================== */
#wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden;}
#content { position: relative; max-width: 1600px; margin: auto; background:#97363D url(../images/bg_1.png) repeat fixed; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); overflow: hidden;}
#main_block{ position: relative; }

#header { position:fixed; z-index:1000; width: 100%; top: 0; left:0; }
#header .bar{ position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #C1832E 0%, #FBE4B0 52%, #BE812A 100%);}

#footer { position:relative; padding:  40px 0; z-index: 200; }
/* =============================================================================
   BLOCK END
   ========================================================================== */

/*---NAV---*/
.nav{ position: fixed; bottom: 20px; right: 20px; width: 40px; z-index: 1000;}
.nav a{ display: block; position: relative; width: 40px; height: 40px; border-radius: 30px; background: #C28732; margin: 0 0 10px 0; font-size: 20px; color: #FFF; line-height: 40px; text-align: center;}
.nav a img{ display: block; width: 100%;}
.nav a.store{ font-size: 24px;}
@media only screen and (max-width: 576px) {
	.nav{ width: 30px;}
	.nav a{ width: 30px; height: 30px; font-size: 16px; line-height: 30px;}
}

/*---ai_anchor---*/
.ai_anchor{ position: relative; margin: auto; overflow: hidden;}
.ai_anchor::before{ content: ''; display: block; padding-bottom: 56.25%;}
.ai_anchor .video{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events: none;}
.ai_anchor .video::before{ content: ''; display: block; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 38.23%); z-index: 100;}
.ai_anchor .video video { z-index: 1; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none; background-size: cover;
    transform: translateX(-50%) translateY(-50%);
	transition: 1000ms ease;
}
.ai_anchor .text_bar{ position: absolute; bottom: 60px; left: 0; width: 100%; height: 77px; background: url(../images/text_bar_bg.png); background-size: cover; z-index: 100; pointer-events: none;}
.ai_anchor .text_bar2{ position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: url(../images/text_bar_bg2.png); background-size: cover; z-index: 101;}
.ai_anchor .text_bar .t1{ position: absolute; bottom: -8px; left: 0;}
.ai_anchor .text_bar .t1 img{ width: 100%;}
.ai_anchor .text{ position: absolute; bottom: 60px; left: 580px; width: calc(100% - 580px); z-index: 200; color: #FFF; pointer-events: none;
	text-align: left;
	font: 700 40px/77px 'Noto Sans TC', sans-serif; 
}
.ai_anchor .m1{ position: absolute; top: -100px; left: 0; z-index: 200; opacity: 0; width: 40%; pointer-events: none;
	transition: 500ms ease;
}
.ai_anchor .m1 img{ width: 100%;}
.ai_anchor .m1.on{ opacity: 1;}

.ai_anchor .m2{ position: absolute; top: -100px; left: 0; z-index: 200; opacity: 0; width: 40%; pointer-events: none;
	transition: 500ms ease;
}
.ai_anchor .m2 img{ width: 100%; pointer-events: none;}
.ai_anchor .m2.on{ opacity: 1; pointer-events: fill;}


.ai_anchor .m2m{ position: absolute; top: -100px; left: 0; z-index: 200; opacity: 0; width: 40%; pointer-events: none; display: none;
	transition: 500ms ease;
}
.ai_anchor .m2m img{ width: 100%; pointer-events: none;}
.ai_anchor .m2m.on{ opacity: 1; pointer-events: fill;}


.btn_start{
	position: absolute; bottom: 90px; left: calc(50% - 60px);
	width: 120px; height: 120px; color: #FFF; font: 700 40px/112px 'Noto Sans TC', sans-serif;  text-align: center; border-radius: 60px; z-index: 300; cursor: pointer;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%), #EDBC4E;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.30);
	border: solid 4px #FFF;
	-webkit-animation: bounce .4s  cubic-bezier(.5,.2,.8,.8) infinite alternate ;
	animation: bounce .4s  cubic-bezier(.5,.2,.8,.8) infinite alternate;
}
.btn_start:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
@keyframes bounce {
	0%{ transform: translateY(-5px); }
	100%{transform: translateY(5px) scale(1, 0.95);}
}
@media only screen and (max-width: 1400px) {
	.ai_anchor .text{ font: 700 30px/77px 'Noto Sans TC', sans-serif; }
}
@media only screen and (max-width: 1300px) {
	.btn_start{ position: absolute; bottom: 20px; }
	.ai_anchor::before{ padding-bottom: 70%;}

	.ai_anchor .text_bar .t1{ width: 400px;}
	.ai_anchor .text_bar{ bottom: 40px; height: 55px; }
	.ai_anchor .text_bar2{ height: 40px;}
	.ai_anchor .m1{ top: 0;}
	.ai_anchor .m2{ top: 0;}
	.ai_anchor .text{ bottom: 40px; left: 400px; width: calc(100% - 400px); font: 700 30px/55px 'Noto Sans TC', sans-serif; }
}
@media only screen and (max-width: 992px) {
	.ai_anchor::before{ padding-bottom: 90%;}
	.ai_anchor .m1{ top: 50px; width: 48%; left: -40px;}
	.ai_anchor .m2{ top: 50px; width: 48%; left: -40px;}
	.btn_start{margin-left:10px;bottom:10px;width:90px;height:90px;color:#FFF;font:700 30px/82px 'Noto Sans TC',sans-serif;}

	.ai_anchor .text_bar .t1{ width: 300px;}
	.ai_anchor .text_bar{ bottom: 20px; height: 40px; }
	.ai_anchor .text_bar2{ height: 22px; bottom:-2px}
	.ai_anchor .text{ bottom: 20px; left: 320px; width: calc(100% - 320px); font: 700 20px/40px 'Noto Sans TC', sans-serif; }
	
}
@media only screen and (max-width: 576px) {
	.ai_anchor{ background: rgba(141, 37, 46, 0.6); z-index: 1;}
	.ai_anchor::before{ padding-bottom: 170%; transform: scale(0.5);}
	.ai_anchor .video video { transform: translateX(-53%) translateY(-50%);}
	.ai_anchor .video::before{ display: none;}
	.ai_anchor .text_bar .t1 { width: 200px; left: -10px; bottom: 23px; }
	.ai_anchor .text_bar{ bottom: 10px; height: 30px; }
	.ai_anchor .text_bar2{ height: 12px; bottom:-2px}
	.ai_anchor .text{ bottom: 10px; left: 10px; width: calc(100% - 20px); font: 700 16px/30px 'Noto Sans TC', sans-serif; text-align: center;}
	.ai_anchor .m1{ display: none;}
	.ai_anchor .m2{ display: none;}
	.ai_anchor .m2m{ top: 5%; left: 5%; width: 90%;}
	.ai_anchor .m2m.on{ display: block; }
	.ai_anchor .video.off video{opacity: 0;}
}

.btn_back{ position: absolute; top: 20px; right: 20px;
	width: 120px; height: 40px; color: #FFF; font: 700 20px/40px 'Noto Sans TC', sans-serif;  text-align: center; border-radius: 30px; z-index: 210; cursor: pointer;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%), #EDBC4E;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.30);
}
.btn_back img{ display: inline-block; width: 16px; vertical-align: middle; margin: -5px 10px 0 0;}
.btn_back.off{ display: none;}
.btn_back:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.btn_share{ position: absolute; top: 20px; right: 20px;
	width: 120px; height: 40px; color: #FFF; font: 700 20px/40px 'Noto Sans TC', sans-serif;  text-align: center; border-radius: 30px; z-index: 210; cursor: pointer;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%), #EDBC4E;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.30);
}
.btn_share.off{ display: none;}
.btn_share:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.btn_reset{ position: absolute; top: -120px; right: 70px;
	width: 120px; height: 40px; color: #FFF; font: 700 20px/40px 'Noto Sans TC', sans-serif; text-align: center; border-radius: 30px; z-index: 200; cursor: pointer;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%), #EDBC4E;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.30);
	transition: 500ms ease;
}
.btn_reset:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.btn_reset.on{ top: 20px;}

.btn_play{ position: absolute; top: 60%; left: calc(50% - 30px); z-index: 200; width: 90px; height: 90px; border-radius: 45px; cursor: pointer;
	transition: 500ms ease;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.30);
}
.btn_play.off{ opacity: 0; display: none;}
.btn_play:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 576px) {
	.btn_share{width:100px;height:30px;font:700 18px/30px 'Noto Sans TC',sans-serif;}
	.btn_back{width:100px;height:30px;font:700 18px/30px 'Noto Sans TC',sans-serif;}
	.btn_back img{width:14px;}
	.btn_play{width:60px;height:60px;}
	.btn_play img{width:100%;}
	.btn_reset{ right: 60px; width: 80px; height: 30px; font: 700 18px/30px 'Noto Sans TC', sans-serif;}
}

.shoe_box{ position: relative; padding: 100px 0;}
.shoe_box .inner-width{ margin-top: -200px;}
.shoe_box .row{ position: relative;}
.shoe_box .title_bar{ position: relative; width: 700px; margin: auto; padding-top: 200px;}
.shoe_box .title_bar .swt1{ position: absolute; width: 100%; top: 0; left: 0; z-index:1;}
.shoe_box .title_bar .swt1 img{ max-width: 100%;}
.shoe_box .title_bar .swt2{ position: relative; text-align: center; z-index: 2;}
.shoe_box .title_bar .swt2 img{ max-width: 100%;}
.shoe_box .title_bar .swt2 .name{ margin-top: 10px;
	font: 700 30px/50px 'Noto Serif TC', serif; color: #FFF;
}
.shoe_box .txt{ position: relative; z-index: 10;}
.shoe_box .txt .name{
	font: 700 26px/1.4em 'Noto Serif TC', serif; color: #FFE794;
	margin-bottom: 20px;
}
.shoe_box .txt .name span{
	font: 700 26px/1.1em serif; color: #FFE794;
}
.shoe_box .txt .con{
	font: 400 20px/1.5em 'Noto Sans TC', sans-serif; color: #FFF;
	margin-bottom: 20px;
}
.shoe_box .txt .type{
	font: 400 18px/1.4em 'Noto Serif TC', serif; color: #FFF;
	
}
.shoe_box .txt .price{
	font: 500 18px/40px 'Noto Serif TC', serif; color: #FFE794;
}
.shoe_box .pic{ overflow: hidden; }
.shoe_box .pic img{ max-width: 100%; pointer-events: none;}

.btn_buy{ display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 22px; cursor: pointer; text-align: center; color: #FFF; vertical-align:text-top;
	transition: 500ms ease;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%);
}
.btn_buy img{ display: block; width: 30px; height: 30px; }
.btn_buy:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}


@media only screen and (max-width: 992px) {
	.shoe_box{ padding: 100px 0 200px;}
	.shoe_box .txt .name{ font-size: 24px; margin-bottom: 10px;}
	.shoe_box .txt .name b{ font-size: 16px;}
	.shoe_box .txt .con{ font-size: 19px; margin-bottom: 10px;}
}
@media only screen and (max-width: 576px) {
	.shoe_box{ padding: 100px 0;}
	.shoe_box .title_bar{ width: 100%;}
	.shoe_box .title_bar .swt1{ left: 0;}
	.shoe_box .title_bar .swt2{ width: 90%; margin: auto;}
	.shoe_box .txt .name{ font-size: 22px; }
	.shoe_box .txt{ transform: translateY(-50px);}
}

.sw1{ position: absolute; top: -700px; left: calc(50% - 500px); width: 1000px; height: 1000px; z-index: 0; pointer-events: none; padding: 0;}
.sw1 img{
	max-width: 100%;
	-webkit-animation: rotate 30s linear infinite ;
	animation: rotate 30s linear infinite;
}

.sw2{ position: absolute; top: -200px; left: -600px; width: 1000px; height: 1000px; z-index: 0; pointer-events: none; padding: 0;}
.sw2 img{ max-width: 100%;}

.sw3{ position: absolute; top: -200px; left: -350px; width: 1000px; height: 1000px; z-index: 0; pointer-events: none; padding: 0;}

.sw4{ position: absolute; top: -200px; right: -600px; width: 1000px; height: 1000px; z-index: 0; pointer-events: none; padding: 0;}
.sw4 img{ max-width: 100%;}

.sw5{ position: absolute; top: -200px; right: -400px; z-index: 0; pointer-events: none; padding: 0; width: 249px;}
.sw5 img{ max-width: 100%;}

.sw6{ position: absolute; top: -200px; left: -600px; width: 1000px; height: 1000px; z-index: 0; pointer-events: none; padding: 0;}
.sw6 img{ max-width: 100%;}

.sw7{ position: absolute; top: -200px; left: -400px; z-index: 0; pointer-events: none; padding: 0; width: 209px;}
.sw7 img{ max-width: 100%;}

.sw8{ position: absolute; top: 70px; left: calc(50% - 125px); width: 250px; z-index: 0; pointer-events: none; padding: 0;}
.sw8 img{max-width:100%;}

.sw9{ position: absolute; top: 200px; left: -100px; width: 500px; z-index: 2; pointer-events: none; padding: 0;}
.sw9 img{width:100%;}

.sw10{ position: absolute; top: 400px; right: -100px; width: 500px; z-index: 2; pointer-events: none; padding: 0;}
.sw10 img{width:100%;}

.sw11{ position: absolute; top: -400px; right: -600px; width: 1000px; height: 1000px; z-index: 0; pointer-events: none; padding: 0;}
.sw11 img{ max-width: 100%;}

.sw12{ position: absolute; top: -200px; right: -350px; z-index: 0; pointer-events: none; padding: 0; width: 500px;}
.sw12 img{ max-width: 100%;}

.sw13{ position: absolute; top: -200px; left: -600px; width: 800px; height: 800px; z-index: 0; pointer-events: none; padding: 0;}
.sw13 img{ max-width: 100%;}

.sw14{ position: absolute; top: -300px; left: -400px; z-index: 100; pointer-events: none; padding: 0; width: 250px;}
.sw14 img{ max-width: 100%;}

.sw15{ position: absolute; top: -400px; right: -600px; width: 800px; height: 800px; z-index: 0; pointer-events: none; padding: 0;}
.sw15 img{ max-width: 100%;}

.sw16{ position: absolute; top: -300px; right: -400px; z-index: 100; pointer-events: none; padding: 0; width: 249px;}
.sw16 img{ max-width: 100%;}



@keyframes rotate {
	0%{ transform: rotate(0deg); }
	100%{transform: rotate(360deg);}
} 

@media only screen and (max-width: 1600px) {
	.sw5{ right: -350px; transform: scale(0.9);}
	.sw7{ top: -240px; left: -320px; transform: scale(0.9);}
	.sw14{ left: -400px; transform: scale(0.9);}
	.sw16{ right: -400px; transform: scale(0.9);}
}

@media only screen and (max-width: 1400px) {
	.sw5{ right: -260px;}
	.sw7{ top: -300px; left: -260px;}
	.sw14{ left: -300px; width: 200px;}
	.sw16{ right: -300px; width: 200px;}
}

@media only screen and (max-width: 1200px) {
	.sw14{ top: -250px; left: -200px; width: 160px;}
	.sw16{ top: -300px; right: -200px; width: 160px;}
}
@media only screen and (max-width: 992px) {
	.sw5{ top: -50px; width: 180px; right: -200px;}
	.sw7{ top: -300px; left: -200px; width: 150px;}
	.sw9{ top: 100px; width: 300px;}
	.sw10{ top: 200px; width: 300px;}
}
@media only screen and (max-width: 576px) {
	.sw4{ right: -200px; }
	.sw5{ width: 120px; right: -180px;}
	.sw6{ left: -200px; }
	.sw7{ top: -240px; width: 120px;}
	.sw8{ left: calc(50% - 60px); width: 120px;}
	.sw9{ top:0; width: 200px;}
	.sw10{ top: 100px; width: 200px;}
	.sw12{ top: -100px; right: -150px;}
	.sw11{ right: -200px;}
	.sw13{ left: -200px;}
	.sw14{ left: -200px; width: 120px;}
	.sw15{ right: -200px; }
	.sw16{ right: -200px; width: 120px;}
}

.pop_box{ position:fixed; top:0%; left:0; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch; z-index:1000;
	display: none;
}
.pop_box.on{ top:0; opacity:1;}
.pop_box .mask{  position: fixed; top:0%; left:0; width:100%; height:100%; z-index:1; opacity:1;
	background: linear-gradient(180deg, #120732 0%, #36133E 100%), #D9D9D9;
	transition: 800ms ease;
}

.btn_close{ position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 30px; cursor: pointer; z-index: 200; text-align: center;
	transition: 500ms ease;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.30);
}
.btn_close::before{ content: ''; display: block; width: 40px; height: 40px; background: url(../images/btn_close.svg) no-repeat; background-size: cover;}
.btn_close:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 576px) {
	.btn_close{  width:30px; height: 30px; }
	.btn_close::before{ width: 30px; height: 30px; }
}

.card_box{ position: relative; text-align: center; margin-bottom: 60px;}
.card_box .pic{ position: relative; z-index: 1; margin: 0 30px;}
.card_box .pic img{ max-width: 100%;}
.attention {display: block; text-align: center; flex: 0 0 50%; padding: 0 0 20px 0;}
.attention a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-size: 24px; color: #FFF; margin: 0 2px;
	transition: 300ms ease;
}
.attention a img{ display: inline-block; width: 24px; vertical-align: middle; margin-top: -4px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(89deg) brightness(109%) contrast(101%);}
.attention a:hover{ color: #80333D; background: #FFF;}
.attention a:hover img{ filter: invert(23%) sepia(14%) saturate(3402%) hue-rotate(308deg) brightness(96%) contrast(87%); }

.copyright{ position: relative; padding: 0 0 160px; font: 400 14px/1.1em 'Noto Serif TC', serif; color: #FFE794; text-align: center;}

/*---share_bar---*/
.share_bar{ position: absolute; bottom: 0; left: calc(50% - 180px); width: 360px; z-index: 100; opacity: 0;
	transition: 1000ms ease;
}

.share_bar .items a{ position: relative; color: #FFF; display: flex; justify-content: center; align-items: center; font-size: 18px; width: 170px; padding: 0 20px; height: 40px; border-radius: 20px; margin: 0 0 20px 0;}
.share_bar .items a i{ position: absolute; top: 0; left: 0; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 24px; }
.share_bar .items a.line img{ width: 20px; position: absolute; top: 0; left: 0; margin: 10px; height: 20px;}
.share_bar .con{ color: #FFF; text-align: center; font: 500 18px/1.8em 'Noto Sans TC', sans-serif;}
.share_bar .con2{ color: #FFF; text-align: center; font: 700 24px/1.8em 'Noto Sans TC', sans-serif;}
.share_bar .items a.fb{ background: #3B5998;}
.share_bar .items a.fb:hover{ background: #3B5998;}
.share_bar .items a.line{ background: #00B901;}
.share_bar .items a.line:hover{ background: #00B901;}
.share_bar .items a:hover{ color: #FFF;}
.share_bar .items a.line img{ filter: invert(100%) sepia(84%) saturate(0%) hue-rotate(200deg) brightness(105%) contrast(102%)}
.share_bar .items a.line:hover img{ filter: invert(100%) sepia(84%) saturate(0%) hue-rotate(200deg) brightness(105%) contrast(102%);}
/*------*/


.share_box { position: absolute; width: 1600px; left: calc(50% - 800px); height: 100%; margin: auto; z-index: 100; overflow: hidden;}
.share_box .bg{ position: absolute; top: -400px; width: 100%; height: calc(100% + 400px);
	background: url(../images/bg_pop.jpg) top center; background-size: cover;
	transition: 2000ms ease;
}
.share_box.step1 .bg{ top: -300px; }
.share_box.step2 .bg{ top: -200px; }
@media only screen and (max-width: 1600px) {
	.share_box { width: 100%; left: 0;}
}

.sl_box{ position: relative; z-index: 1; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.sol_pos1{ position: absolute; top: 15%; left: 15%; width: 70%; height: 70%;
	transition: 2000ms ease;
}
.sl_box .list{ position: relative; flex: 0 1 1000px; height: 1000px; margin: auto; overflow: hidden;}
.sl_box .items{ width: 90%; margin: 0 5%;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.sl_box .item{ flex: 0 0 calc(100% / 3 ); cursor: pointer;}
.sl_box .item img{ max-width: 100%;}

.sol_pos1.off{ 
	top: -100%;
	transform: scale(1.4);
	opacity: 0;
}
.sol_pos1.off .item:nth-child(1){
	transform: translateY(50px);
	transition: 1500ms ease;
}
.sol_pos1.off .item:nth-child(2){
	transform: translateY(50px);
	transition: 1500ms ease;
}
.sol_pos1.off .item:nth-child(3){
	transform: translateY(50px);
	transition: 1500ms ease;
}
.sol_pos1.off .item:nth-child(4){
	transform: translateY(-100px) scale(1.2);
	transition: 1500ms ease;
}
.sol_pos1.off .item:nth-child(5){
	transform: translateY(-100px) scale(1.2);
	transition: 1500ms ease;
}
.sol_pos1.off .item:nth-child(6){
	transform: translateY(-100px) scale(1.2);
	transition: 1500ms ease;
}

.sol_pos2{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
	transition: 1000ms ease;
}
.sl_box .share{ position: absolute; top: 0%; left: 20%; width: 60%; height: 90%;}
.sl_box .share .swsl1{ position: absolute; top: 0; left: 0; width: 100%; z-index: 100;
	transform: scale(0.5);
	transition: 2000ms ease;
}
.sl_box .share .swsl1 img{ width: 100%;}
.sl_box .share .swsl2{ position: absolute; top: 0; left: 0; width: 100%; z-index: 100;
	transform: scale(0.5);
	transition: 2000ms ease;
}
.sl_box .share .swsl2 img{ width: 100%;}
.sl_box .share .swsl3{ position: absolute; top: 0; left: 0; width: 100%; z-index: 1; opacity: 0;
	transform: scale(0.5);
	transition: 4000ms ease;
}
.sl_box .share .swsl3 img{ width: 100%;}

.sl_box .share .done{ position: absolute; top: 500px; left: calc(50% - 200px); width: 400px; z-index: 100;
	transform: scale(0.5);
	transition: 2000ms ease;
}
.sl_box .share .done img{ width: 100%;}

.sol_pos2.on{ top: 0; }
.sol_pos2.on .share .swsl1{ transform: translateY(-100px) scale(0.8); opacity: 0.2;}
.sol_pos2.on .share .swsl2{ transform: translateY(-50px) scale(0.8); opacity: 0.2;}
.sol_pos2.on .share .swsl3{ transform: translateY(-50px) scale(0.8); opacity: 0.5;}
.sol_pos2.on .share .done{ top: 20%; transform: scale(1.2) translateX(3px); }
.sol_pos2.on .share_bar{ opacity: 1;}

.sol_pos2.off{ top: -100%; }
.sol_pos2.off .share .swsl1{ transform: translateY(-200px) scale(1.2); opacity: 0.2;}
.sol_pos2.off .share .swsl2{ transform: translateY(-150px) scale(1.2); opacity: 0.2;}
.sol_pos2.off .share .swsl3{ transform: translateY(-150px) scale(1.2); opacity: 0.5;}
.sol_pos2.off .share_bar{ opacity: 0;}

.swiper-button-next, .swiper-button-prev {
    color: #FBE4B0 !important;
}

.sol_pos3{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
	transition: 1000ms ease;
}
.sol_pos3 .share .swsl5{ position: absolute; top: 500px; left: calc(50% - 250px); width: 500px; z-index: 100;
	transform: scale(0.5);
	transition: 2000ms ease;
}
.sol_pos3 .share .swsl5 img{ width: 100%;}

.sol_pos3 .con2{ transform: translateY(-100px);}

.sol_pos3.on{ top: 0; }
.sol_pos3.on .share .swsl1{ transform: translateY(-100px) scale(0.8); opacity: 0.2;}
.sol_pos3.on .share .swsl2{ transform: translateY(-50px) scale(0.8); opacity: 0.2;}
.sol_pos3.on .share .swsl3{ transform: translateY(50px) scale(0.8); opacity: 0.5;}
.sol_pos3.on .share .swsl5{ top: 20%; transform: scale(1.2); }
.sol_pos3.on .share_bar{ opacity: 1;}

@media only screen and (max-width: 1600px) {
	.sol_pos2.on .share .done{ top: 10%; transform: scale(1.2) translateX(3px); }
	.sol_pos3 .con2{ transform: translateY(-40px);}
}

@media only screen and (max-width: 992px) {
	.sol_pos1{  top: 10%; }
	.sl_box .item { flex: 0 0 calc(100% / 2 );}
	.sl_box .share{left:10%;width:80%;}
}

@media only screen and (max-width: 576px) {
	.sol_pos1{  top: 10%; left: 0%; width: 100%; }
	.swiper-button-next, .swiper-button-prev{ transform: scale(0.7)}
	.sl_box .item { flex: 0 0 calc(100% / 2 );}
	.sol_pos1 .item:nth-child(1){margin-right:-20px;}
	.sol_pos1 .item:nth-child(2){margin-left:-20px;}
	.sol_pos1 .item:nth-child(3){margin-right:-20px;}
	.sol_pos1 .item:nth-child(4){margin-left:-20px;}
	.sol_pos1 .item:nth-child(5){margin-right:-20px;}
	.sol_pos1 .item:nth-child(6){margin-left:-20px;}
	.sol_pos1.off .item:nth-child(4){transform: translateY(0) scale(1);}
	.sol_pos1.off .item:nth-child(5){transform:translateY(-100px) scale(1.2);}
	.sol_pos1.off .item:nth-child(6){transform:translateY(-100px) scale(1.2);}
	.sol_pos2{height:95%;}
	.sl_box .share{top:10%;left:0%;width:100%;}
	.sl_box .share .done{top:20%;left:calc(50% - 150px);width:300px;}
	.sol_pos3{height:95%;}
	.sol_pos3.on .share .swsl3{transform:translateY(50px) scale(1);}
	.sol_pos3 .share .swsl5{top:20%;left:calc(50% - 150px);width:300px;}
	.sol_pos3 .con2{ transform: translateY(-20px);}
}


.outfit_box{ position: relative; padding: 100px 0;}
.outfit_box .row{ position: relative;}
.outfit_box .title_bar{ position: relative; width: 700px; margin: auto; padding-top: 200px;}
.outfit_box .title_bar .swt3{ position: absolute; width: 100%; top: 0; left: 0; z-index:1;}
.outfit_box .title_bar .swt3 img{ max-width: 100%;}
.outfit_box .title_bar .swt4{ position: relative; text-align: center; z-index: 2;}
.outfit_box .title_bar .swt4 img{ max-width: 100%;}
.outfit_box .title_bar .swt4 .name{ margin-top: 10px;
	font: 700 30px/50px 'Noto Serif TC', serif; color: #FFF;
}
.outfit_box .mv_16by9 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin: -100px 0 150px 0;}
.outfit_box .mv_16by9 iframe{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

.outfit_box .mv_9by16 { position: relative; aspect-ratio: 9 / 16; overflow: hidden; margin: -100px 0 150px 0;}
.outfit_box .mv_9by16 iframe{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
/* .outfit_box .mv_16by9 iframe { z-index: 1; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none; max-height: none;
    transform: translateX(-50%) translateY(-50%);
	transition: 1000ms ease;
} */

.outfit_box .row{ margin-bottom: 200px;}

.outfit_box .txt{ position: relative; z-index: 10;}
.outfit_box .txt .name{
	font: 700 26px/1.4em 'Noto Serif TC', serif; color: #FFE794;
	margin-bottom: 20px;
}
.outfit_box .txt .name span{
	font: 700 26px/1.1em serif; color: #FFE794;
}
.outfit_box .txt .con{
	font: 400 20px/1.5em 'Noto Sans TC', sans-serif; color: #FFF;
	margin-bottom: 20px;
}
.outfit_box .txt .type{font:400 18px/1.1em 'Noto Serif TC',serif;color:#FFF; margin-bottom: 10px;}
.outfit_box .txt .type span{color:#FFE794;}
.outfit_box .col-md-6{ position: relative;}

.outfit_box .cover_left{ position: absolute; top: 0; right: 20px; width: 140%; height: 100%; overflow: hidden; border-radius: 0 100px 100px 0;}
.outfit_box .cover_right{ position: absolute; top: 0; left: 20px; width: 140%; height: 100%; overflow: hidden; border-radius: 100px 0 0 100px;}

.outfit_box .bc1{  position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 200px); background: url(../images/outfit/outfit_bg1.png) repeat; }
.outfit_box .bc2{  position: absolute; top: 0; right: 0; width: 100%; height: calc(100% + 200px); background: url(../images/outfit/outfit_bg2.png) repeat; }
.outfit_box .bc3{  position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 200px); background: url(../images/outfit/outfit_bg3.png) repeat; }
.outfit_box .bc4{  position: absolute; top: 0; right: 0; width: 100%; height: calc(100% + 200px); background: url(../images/outfit/outfit_bg4.png) repeat; }

.outfit_box .pic{ position: relative; z-index: 200; }
.outfit_box .pic img{ max-width: 100%; pointer-events: none;}

.outfit_box .pic .p1{ position: relative; transform: translateY(-100px) scale(1.2); left: -100px;}
.outfit_box .pic .p2{ position: relative; transform: translateY(-100px) scale(1.2); left: 100px;}
.outfit_box .pic .p3{ position: relative; transform: translateY(-100px) scale(1.2); left: -100px;}
.outfit_box .pic .p4{ position: relative; transform: translateY(-100px) scale(1.2); left: 100px;}


.outfit_box .pho_list{ position: relative; display: flex; justify-content: flex-start; margin-bottom: 20px;}
.outfit_box .pho_list.right{ justify-content: flex-end;}

.outfit_box .pho_list.s1{ margin-right: -120px;}
.outfit_box .pho_list.s2{ margin-left: -120px;}

.outfit_box .pho_list a + a{ margin-left: 20px;}
.outfit_box .pho_list a { display: block; width: 400px; border-radius: 40px; overflow: hidden;}
.outfit_box .pho_list a img{ display: block; max-width: 100%;}




.btn_buy2{ display: inline-block; height: 30px; line-height: 30px; border-radius: 22px; cursor: pointer; text-align: center; margin: 10px 0 0 0; padding: 0 15px 0 4px;
	transition: 500ms ease;
	background: linear-gradient(90deg, #C1832E 0%, #EDBC4E 100%);
	font: 400 16px/1.1em 'Noto Sans TC', sans-serif; color: #FFF;
}
.btn_buy2 img{ display: inline-block; width: 30px; height: 30px; vertical-align: middle;}
.btn_buy2 span{ display: inline-block; vertical-align: middle;}


.btn_buy2:hover{
	background: linear-gradient(90deg, #e5972a 0%, #f5d079 100%), #EDBC4E;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	color: #FFF;
}



@media only screen and (max-width: 1600px) {
	.outfit_box .pho_list.s1{ margin-right: -100px;}
	.outfit_box .pho_list.s2{ margin-left: -100px;}
}
@media only screen and (max-width: 1400px) {
	.outfit_box .pho_list.s1{ margin-right: 0;}
	.outfit_box .pho_list.s2{ margin-left: 0;}
	.outfit_box .pic .p1{ left: -50px;}
	.outfit_box .pic .p2{ left: 50px;}
	.outfit_box .pic .p3{ left: -50px;}
	.outfit_box .pic .p4{ left: 50px;}
}

@media only screen and (max-width: 1200px) {
	
	
}


@media only screen and (max-width: 992px) {
	/* .outfit_box .mv_16by9 { aspect-ratio: 4 / 3;}
	.outfit_box .mv_16by9 iframe { min-width: 140%; min-height: 140%; } */
	.outfit_box .txt .name{ font-size: 24px; margin-bottom: 10px;}
	.outfit_box .txt .name b{ font-size: 16px;}
	.outfit_box .txt .con{ font-size: 19px; margin-bottom: 10px;}
	.outfit_box .pic .p1{ left: -20px;}
	.outfit_box .pic .p2{ left: 20px;}
	.outfit_box .pic .p3{ left: -20px;}
	.outfit_box .pic .p4{ left: 20px;}
}
@media only screen and (max-width: 576px) {
	/* .outfit_box .mv_16by9 { aspect-ratio: 1 / 1;}
	.outfit_box .mv_16by9 iframe { min-width: 180%; min-height: 180%; } */
	.outfit_box{ padding: 100px 0 150px;}
	.outfit_box .title_bar{ width: 100%;}
	.outfit_box .title_bar .swt1{ left: 0;}
	.outfit_box .title_bar .swt2{ width: 90%; margin: auto;}
	.outfit_box .txt{ padding: 20px 0; margin-top: 100px;}
	.outfit_box .txt .name{ font-size: 22px;}
	.outfit_box .txt{ transform: translateY(20px);}
	.outfit_box .row{ margin-bottom: 0;}
	.outfit_box .row + .row{ margin-top: 200px;}
	.outfit_box .cover_left{ border-radius: 0 50px 50px 0;}
	.outfit_box .cover_right{ border-radius: 50px 0 0 50px;}
	.outfit_box .pho_list a { border-radius: 20px;}
}

/*---RWD---*/
.desk-show { display: block !important;}
.desk-ib-show{ display: inline-block !important;}
.mobile-show { display: none !important; }
.peload{ opacity:0; transition: opacity 2000ms 3000ms ease;}
.peload.ed{ opacity:1;}
.pehide.ed{ display:none;}
@media only screen and (max-width: 576px) {
	.desk-show { display: none!important; }
	.desk-ib-show{ display: none !important;}
	.mobile-show { display: block!important; }
}