@charset "UTF-8";
html {
font-size: 16px;
-webkit-text-size-adjust:none;
color:#303030;
}
@media screen and (max-width: 640px) {
}
body {
background: #fff;
font-size:12px;
font-family:'Noto Serif TC',Helvetica,Arial,"微軟正黑體","Microsoft JhengHei",sans-serif;
background: #fff;
}
img {
position: relative;
display: block;
border: 0;
width: 100%;
height: auto;
}
.wrap {
position: absolute;
display: block;
width: 100%;
overflow: hidden;
}
.wrap .preload {
display: none;
}
.symbol-m {
display: none !important;
}
@media screen and (max-width: 1000px) {
.symbol-m {
display: block !important;
}
.symbol-pc {
display: none !important;
}
}
.wrap a {
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top:0;
}
.wrap .footerBox {
position: relative;
display: block;
width: 100%;
padding: 3vw 0 3vw 0;
background: #000;
z-index: 2;
}
.wrap .footerBox .socialmedia {
position: relative;
display: block;
width: 100%;
font-size: 0;
text-align: center;
padding: 15px 0 15px 0;
}
.wrap .footerBox .socialmedia li {
position: relative;
display: inline-block;
width: 8vw;
max-width: 55px;
margin: 0 10px 0 10px;
}
.wrap .footerBox .copyright {
position: relative;
display: block;
text-align: center;
font-size: 12px;
padding: 15px 0 0 0;
font-family:Helvetica,Arial,"微軟正黑體","Microsoft JhengHei",sans-serif;
color: #fff;
}
.wrap .footerBox .copyright br {
display: none;
}
@media screen and (max-width: 1000px) {
.wrap .footerBox .socialmedia li {
max-width: inherit;
width: 13vw;
}
.wrap .footerBox .copyright br {
display: block;
}
}
.kv-box {
position: fixed;
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 56.2vw;
overflow: hidden;
top: -5px;
left: 0;
}
.kv-block {
position: relative;
display: block;
width: 100%;
height: 56.2vw;
pointer-events: none;
}
.kv-box .kv-video-box {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.kv-box .kv-video-box video {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.video-muted-btn {
position: absolute;
display: block;
right: 2vw;
top:2vw;
width: 40px;
cursor: pointer;
}
.video-muted-btn img:nth-child(2) {
position: absolute;
width: 100%;
left: 0;
top:0;
}
.video-muted-btn.current-muted img:nth-child(1) {
opacity: 1;
}
.video-muted-btn.current-muted img:nth-child(2) {
opacity: 0;
}
.video-muted-btn.current-unmuted img:nth-child(1) {
opacity: 0;
}
.video-muted-btn.current-unmuted img:nth-child(2) {
opacity: 1;
}
@media screen and (max-width: 1000px) {
.kv-box {
width: 100%;
height: 120vw;
/*height: 177vw;*/
top:-3vw;
}
.kv-block {
width: 100%;
height: 120vw;
/*height: 177vw;*/
top:-3vw;
}
.video-muted-btn {
top: 4vw;
/*top: 110vw;*/
right: 1vw;
}
}
.stage-container {
position: relative;
display: block;
width: 100%;
background: url(../images/main_bg_pc.jpg) no-repeat center top;
background-size:cover;
z-index: 2;
}
@media screen and (max-width: 1000px) {
.stage-container {
background: url(../images/main_bg_m.jpg) no-repeat center top;
background-size:cover;
}
}
.stagebox {
position: relative;
display: block;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.stage-intro {
margin-top: -3vw;
}
.stage-intro .intro-textbox {
position: relative;
display: block;
width: 100%;
height: 50vw;
}
.stage-intro .intro-text1,
.stage-intro .intro-text2,
.stage-intro .intro-text3,
.stage-intro .intro-text4,
.stage-intro .intro-text5,
.stage-intro .intro-text6,
.stage-intro .intro-text7,
.stage-intro .intro-text8{
position: absolute;
display: block;
width: 70%;
left: 15%;
top:0vw;
z-index: 1;
}
.stage-intro .intro-line {
position: relative;
display: block;
width: 1px;
background: none;
}
.stage-intro .intro-line1 {
height: 7vw;
}
.stage-intro .intro-line2 {
height: 0vw;
}
@media screen and (max-width: 1000px) {
.stage-intro {
display: block;
}
.stage-intro .intro-textbox {
width: 90%;
height: 70vw;
left: 5%;
}
.stage-intro .intro-line1 {
height: 0vw;
}
.stage-intro .intro-line2 {
height: 0vw;
}
.stage-intro .intro-text1,
.stage-intro .intro-text2,
.stage-intro .intro-text3,
.stage-intro .intro-text4,
.stage-intro .intro-text5,
.stage-intro .intro-text6,
.stage-intro .intro-text7,
.stage-intro .intro-text8{
width: 100%;
left: 0%;
top:15vw;
z-index: 1;
}
}
.star-sliderbox {
position: relative;
display: block;
width: 100%;
}
.star-sliderbox .star-slider {
position: relative;
display: block;
width: 100%;
}
.star-sliderbox .star-slider .item{
position: relative;
display: block;
width: 100%;
}
.star-sliderbox .star-slider .item .star-box{
position: relative;
display: block;
width: 60%;
margin: 0 auto;
}
.stage-title {
position: relative;
display: block;
}
.stage-bellaStar {
z-index: 1;
}
.stage-bellaStar .stage-title {
width:30vw;
position: absolute;
top:3vw;
left: calc(50% - 2vw);
z-index: 2;
margin: 0;
}
.stage-bellaStar .bellaStar-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 70vw;
height: auto;
padding: 5vw 0 0 5.3vw;
}
.stage-bellaStar .bellaStar-content .imgBox {
position: relative;
display: block;
width: 30vw;
z-index: 1;
order: 1;
}
.stage-bellaStar .bellaStar-content .textBox {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 35vw;
height: 100%;
padding: 0 0 0 3vw;
order: 2;
}
.stage-bellaStar .bellaStar-content .textBox h1 {
position: relative;
display: inline-block;
font-weight: bold;
font-size: 2vw;
line-height: 180%;
color: #808080;
font-family:'Noto Sans TC',Helvetica,Arial,"微軟正黑體","Microsoft JhengHei",sans-serif;
}
.stage-bellaStar .bellaStar-content .textBox h2 {
position: relative;
display: inline-block;
font-weight: 400;
font-size: 1.4vw;
line-height: 180%;
color: #2D2D2D;
text-align: left;
font-family:'Noto Sans TC',Helvetica,Arial,"微軟正黑體","Microsoft JhengHei",sans-serif;
padding: 2vw 0 2vw 0;
}
.stage-bellaStar .bellaStar-content .textBox h3 {
font-weight: bold;
font-size: 1vw;
line-height: 1.5vw;
margin-top: 3vw;
text-align: justify;
}
.stage-bellaStar .more-btn {
position:relative;
display: block;
width: 12vw;
z-index: 2;
-webkit-transform: scale(1);
transform: scale(1);
margin: 0;
}
.stage-bellaStar .more-btn:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.dot-btn-list-star {
margin: 1.5vw 0 0 0;
}
@media screen and (max-width: 1000px) {
.stage-bellaStar {
height: auto;
}
.star-sliderbox .star-slider .item .star-box{
width: 90%;
}
.stage-bellaStar .stage-title {
width:70vw;
left: calc(50% - 35vw);
}
.stage-bellaStar .bellaStar-content {
flex-direction: column;
display: block;
width: 100%;
height: auto;
padding: 18vw 0 0 0;
margin-top: 0;
}
.stage-bellaStar .bellaStar-content::before {
border-left: 2px solid #64829a;
border-top:2px solid #64829a;
width: 4vw;
height: 15vw;
}
.stage-bellaStar .bellaStar-content::after {
border-right: 2px solid #64829a;
border-bottom:2px solid #64829a;
width: 4vw;
height: 15vw;
}
.stage-bellaStar .bellaStar-content .imgBox {
width: 90%;
margin: 8vw auto 0 auto;
order: 1;
}
.stage-bellaStar .bellaStar-content .imgBox img {
width: 100%;
}
.stage-bellaStar .bellaStar-content .textBox {
width: 100%;
padding: 3vw 0 0 0;
border: 0px;
order: 2;
left: 0;
align-items: center;
}
.stage-bellaStar .bellaStar-content .textBox h1 {
font-size: 5vw;
line-height: 150%;
text-align: left;
display: block;
}
.stage-bellaStar .bellaStar-content .textBox h2 {
font-size: 3.5vw;
line-height: 200%;
margin-top: 3vw;
text-align: center;
}
.stage-bellaStar .bellaStar-content .textBox h3 {
font-weight: bold;
font-size: 2.8vw;
line-height: 4vw;
margin-top: 6vw;
text-align: center;
}
.stage-bellaStar .more-btn {
margin-top: 3vw;
width: 50%;
left: auto;
}
.dot-btn-list-star {
margin: 5vw 0 0 0;
}
}
.stage-viviland .stage-title {
width: 30vw;
margin-top: 22vw;
}
.vivi-sliderbox1 {
width: 100%;
margin-top: -1vw;
}
.vivi-sliderbox1 .vivi-list1 {
position: relative;
display: block;
width:100%;
}
.vivi-sliderbox1 .vivi-list1 .item {
position: relative;
display: block;
width: 100%;
}
.vivi-sliderbox1 .vivi-list1 .item .pic {
position: relative;
display: block;
width: 100%;
}
.vivi-sliderbox1 .vivi-list1 .item .pic img {
z-index: 2;
}
.vivi-sliderbox1 .vivi-list1 .slick-slide .item{
-webkit-transform: scale(0.55);
transform: scale(0.55);
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
}
.vivi-sliderbox1 .vivi-list1 .slick-slide.slick-center .item {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.vivi-arrow-left {
position: absolute;
display: block;
width: 4vw;
left: 31%;
top:45vw;
cursor: pointer;
z-index: 99;
}
.vivi-arrow-left:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.vivi-arrow-right {
position: absolute;
display: block;
width: 4vw;
right: 31%;
top:45vw;
cursor: pointer;
z-index: 99;
}
.vivi-arrow-right:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media screen and (max-width: 1000px) {
.stage-viviland {
height: 290vw;
justify-content: flex-start;
margin-top: 10vw;
}
.stage-viviland .stagebox {
justify-content: flex-start;
}
.stage-viviland::after {
width: 70%;
height: 1.5vw;
top:134vw;
}
.stage-viviland .stage-title {
width:65vw;
margin-top: 20vw;
}
.vivi-sliderbox1 {
width: 100vw;
height: 120vw;
left: 0;
margin-top: -15vw;
}
.vivi-sliderbox1::before {
top:146vw;
width: 70vw;
left: 15vw;
}
.vivi-sliderbox1::after {
top:146vw;
width: 42vw;
left: auto;
right: 0;
}
.vivi-sliderbox1 .vivi-list1 .slick-slide .item{
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
.vivi-sliderbox1 .vivi-list1 .slick-slide.slick-center .item {
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
.vivi-arrow-left {
left: 3%;
width: 12vw;
top:89vw;
}
.vivi-arrow-right {
right: 3%;
width: 12vw;
top:89vw;
}
}
.vivi-sliderbox2 {
position: relative;
display: block;
width: 100%;
padding: 2vw 10% 2vw 10%;
margin: 8vw 0 0 0;
}
.vivi-sliderbox2::before {
content: "";
position: absolute;
display: block;
width: 90%;
height: calc(100% + 5vw);
left: 5%;
top: -2.5vw;
pointer-events: none;
}
.starbg.starbg3 .star-img1::before {
content: "";
position: absolute;
display: block;
width: 30vw;
height: 1px;
left: 50%;
top:50%;
background: #ff41bf;
}
.starbg.starbg4 .star-img2::before {
content: "";
position: absolute;
display: block;
width: 30vw;
height: 1px;
right: 50%;
top:50%;
background: #ff41bf;
}
.vivi-sliderbox2 .vivi-list2 {
position: relative;
display: block;
width:90%;
overflow: hidden;
margin: 0 auto;
}
.vivi-sliderbox2 .vivi-list2 li {
position: relative;
display: block;
width: 100%;
}
.vivi-sliderbox2 .vivi-list2 .item {
position: relative;
display: block;
padding: 2vw;
}
.vivi-sliderbox2 .vivi-list2 .item .imgBox {
position: relative;
display: block;
width: calc(100% - 2vw);
left: 1vw;
margin: 1vw 0;
}
.vivi-sliderbox2 .vivi-list2 .item .imgBox img{
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
-webkit-transform: scale(1);
transform: scale(1);
overflow: hidden;
}
.vivi-sliderbox2 .vivi-list2 .item:hover .imgBox img{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.vivi-sliderbox2 .vivi-list2 .item .textBox {
position: relative;
display: block;
font-size: 1.4vw;
line-height: 2vw;
text-align: left;
color: #231815;
padding-top: 2vw;
}
.dot-btn-list-vivi2 {
position: relative;
margin-top: 2vw;
margin-bottom: 0vw;
width: 100%;
}
@media screen and (max-width: 1000px) {
.vivi-sliderbox2 {
padding: 5vw 0 2vw 0;
margin: 8vw 0 3vw 0;
}
.vivi-sliderbox2 .vivi-list2 .item {
position: relative;
display: block;
padding: 3vw;
}
.vivi-sliderbox2 .vivi-list2 .item .imgBox::after {
width: 6vw;
height: 6vw;
border-radius: 50%;
top:-3vw;
left: calc(50% - 3vw);
}
.vivi-sliderbox2 .vivi-list2 .item .textBox {
font-size: 4.5vw;
line-height: 150%;
padding: 2vw 8vw 0 8vw;
}
.vivi-sliderbox2 .vivi-list2 .item .imgBox {
width: calc(100% - 20vw);
left: 10vw;
}
}
.ig-sliderbox {
position: relative;
display: block;
width: 60vw;
padding: 20vw 0 10vw 0;
}
.ig-sliderbox .ig-list {
position: relative;
display: block;
width:100%;
}
.ig-sliderbox .ig-list .item {
position: relative;
display: block;
padding: 0 5vw;
}
.ig-sliderbox .ig-list .item .igBox {
position: relative;
display: block;
width: 20vw;
margin: 0 auto;
}
.ig-sliderbox .ig-list .item .igBox::before {
display: none;
}
.ig-sliderbox .ig-list .item .igBox .ig-img {
position: relative;
display: block;
width: 100%;
height: calc(20vw + 163px);
}
.ig-sliderbox .ig-list .item .igBox .ig-img iframe {
min-width: inherit!important;
max-width: inherit!important;
height: 100%;
}
@media screen and (max-width: 1000px) {
.stage-ig {
margin-top:0vw;
padding-top: 10vw;
padding-bottom: 7vw;
}
.ig-sliderbox {
width: 100%;
padding: 0;
margin: 0;
}
.ig-sliderbox .ig-list .item {
position: relative;
display: block;
padding: 0 0 6vw 0;
}
.dot-btn-list-ig {
margin-top: 0vw;
padding-bottom: 0vw;
}
.ig-sliderbox .ig-list .item .igBox {
width: 70%;
left: 15%;
margin: 0;
}
.ig-sliderbox .ig-list .item .igBox .ig-img {
height: calc(70vw + 163px);
}
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
/* -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;*/
-webkit-touch-callout: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
/*overflow: hidden;*/
margin: 0;
padding: 0;
height: 100%;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
height: 100%;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
/*display: none;*/
float: left;
outline: none;
/*height: 47vw;*/
min-height: 1px;
position: relative;
}
.slick-slide > div{width: 100%;}
.slick-slide *:focus{
outline: none;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: flex;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-arrow {
cursor: pointer;
/* position: absolute;
display: block;
width: 41px;
height: 81px;
cursor: pointer;
top: 50%;
margin-top: -40px;
background-position: top;
z-index: 1;
text-indent: -9999px;
border: 0px;*/
}
.slick-arrow:focus {
outline: none;
}
.slick-prev {
left: 0;
}
.slick-prev::after {
content: '';
position: absolute;
display: block;
width: 41px;
height: 81px;
background-position: bottom;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
opacity: 0;
top: 0px;
left: 0px;
}
.slick-next {
right: 0;
}
.slick-next::after {
content: '';
position: absolute;
display: block;
width: 41px;
height: 81px;
background-position: bottom;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
opacity: 0;
top: 0px;
left: 0px;
}
.slick-arrow:hover:after {
opacity: 1;
}
ul.slick-dots {
/*position: absolute;*/
display: block;
width: 100%;
font-size: 0;
line-height: 0;
text-align: center;
position: relative;
}
ul.slick-dots li,ul.slick-dots li{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
opacity: 1;
border-radius:50%;
margin: 0 8px 0 8px;
padding: 0;
cursor: pointer;
box-sizing: content-box;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
position: relative;
display: block;
width: 20px;
height: 20px;
border:0px solid #fff;
border-radius:50%;
padding: 0px;
margin: 0;
cursor: pointer;
background: #808080;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
background:#ccc;
/* transform: scale(1.2);
-webkit-transform: scale(1.2);*/
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
content: none;
}
.slick-dots li button:before{
background: none;
}
.slick-dots li.slick-active button{
background: #000;
}
button:focus{
outline: none;
}
/* slider end */
.wrap a{z-index: 1;}
/*.brand-list .slider{
margin: 0 0 0 0%;
}
.stage5 .wallpaper-viewbox .slider .wallpaper-img{
margin: 0;
}
.brand-list .slick-slide{
display: flex;justify-content: center;align-items: center;
}
.brand-list .slider li{
padding: 0 5px;
margin: 0;
}*/