@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url("../images/bg.jpg") top center repeat-y fixed, url("../images/color-b.jpg") repeat;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }


/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
}



/* ------------------ 右側選單 ------------------ */
@media screen and (min-width: 992px) {
  .navstyle {
    position: fixed;
    right: 50%;
    transform: translateX(50%);
    top: 0;
    z-index: 99;
    width: 1200px;
    border-radius: 0 0 25px 25px;
    padding: 0 10px 10px 5px;
    background: url("../images/color-g.jpg");	
    border: solid 3px #000;  
  }
  .navstyle ul {
    display: flex;
    justify-content: space-around;
  }
  .navstyle ul .active {
    background: #fed928;
    color: #1d5c65;
  }
  .navstyle ul a {
    font-size: 22px;
    color: #1d5c65;
    background: #fff;
    padding: 8px 20px;
    margin: 5px 0;
    display: block;
    border-radius: 40px;
  }
  .navstyle ul a:hover {
    background: #fed928;
    color: #1d5c65;
  }
}
@media screen and (max-width: 991px) {
  .navstyle {
    position: static;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    border-radius: 0;
    padding: 0;
    background: url("../images/color-g.jpg") repeat;
  }
  .navstyle div {
    display: none;
  }
  .navstyle ul {
    display: inline-block;
  }
  .navstyle ul li {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    background: #fff;
    margin: 9px 6px;
    border-bottom: none;
  }
  .navstyle ul li .active {
    background: #fed928;
  }
  .navstyle ul li a {
    color: #1d5c65;
    padding: 0;
    display: inline-block;
  }
  .navstyle ul li a:hover {
    color: #1d5c65;
    border-radius: 15px;
    padding: 0;
  }
  .sticky {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 99;
  }
}
.navstyle::-webkit-scrollbar {
  display: none;
}

/* ------------------ 安全字 ------------------ */
.notice {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
  font-size: 1rem;
  line-height: 1.2rem;
  font-weight: 300;
  color: #fff;
}

/* ------------------  攻略  ------------------ */
.promotion_box {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  background: url("") top center repeat;
}
.promotion_box ul {
  margin: 0 auto;
  padding: 20px 0;
  width: 1200px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.promotion_box ul li img {
  width: 280px;
}

@media screen and (max-width: 991px) {
  .promotion_box {
    width: 100vw;
  }
  .promotion_box ul {
    width: 100vw;
  }
  .promotion_box ul li {
    width: 45vw;
    margin-bottom: 10px;
  }
  .promotion_box ul li img {
    width: 45vw;
  }
}

/*title*/
.titleC h2 {
    position: relative;
    color: #fffae7;
    letter-spacing: 3px;
    width: 1200px;
    font-size: 4rem;
    line-height: 4rem;
	  margin: 0 0 10px 0;
    background: url("../images/titlebg01.png")top center no-repeat;
    padding: 120px 0 43px;
}
.titleC h3 {
    position: relative;
    color: #6a2d1a;
    letter-spacing: 3px;
    width: 1200px;
    font-size: 3rem;
    line-height: 4rem;
    background: url("../images/titlebg02.png")top center no-repeat;
    padding: 30px 0 36px;
}

.half ul h3{
  background: url("../images/titlebg05.png") top center no-repeat;
}
@media screen and ( max-width: 991px ){
  .titleC h2 {
      font-size: 2.6rem;
      line-height: 4rem;
      letter-spacing: 0;
      background-size: 70vw;
      padding: 11vw 0 4vw;
  }
  .titleC h3 {
      font-size: 2rem;
      line-height: 4rem;
      letter-spacing: 0;
      background-size: 50vw;
      padding: 3vw 0 5vw;
  }	
  .half ul h3{
    background-size: 60vw;
    padding: 1vw 0;
  }
}
@media screen and ( max-width: 640px ){
    .titleC h2 {
        font-size: 2.6rem;
        line-height: 4rem;
        letter-spacing: 0;
        background-size: 100vw;
        padding: 12vw 0 2vw;
    }
    .titleC h3 {
        font-size: 2rem;
        line-height: 4rem;
        letter-spacing: 0;
        background-size: 82vw;
        padding: 3vw 0 5vw;
    }	
    .half ul h3{
      background-size: 90vw;
      padding: 0;
    }
}


/*特殊版型*/
.section1 .recommend_2p{margin: 20px auto 10px;}
.section1 .recommend_2p li{width: 900px; background: #fff;position: relative;margin: 10px auto;border-radius: 30px;}
.section1 .recommend_2p li .word{width: 280px; max-width: 280px; max-height:280px; object-fit: contain;padding: 10px;}
.section1 .recommend_2p li .product{max-width: 220px; max-height:280px;position: relative;padding: 8px;right: -330px;}
.section1 .recommend_2p .font{position:relative;left: -220px;margin: auto 0;}
.section1 .recommend_2p li:nth-child(odd){left: 110px;}
.section1 .recommend_2p li:nth-child(even){right: 110px;}
/*.bg_4 .recommend_2p li:nth-child(1){display: none;}*/
.section1 .recommend_2p .font h4{font-size:  1.8rem;}
@media screen and (max-width: 991px){ 
  /*特殊版型*/  
  .section1 .recommend_2p{margin: 2vw auto 1vw;}
  .section1 .recommend_2p li{width:94vw; background: #fff;position: relative;margin: 10px auto; padding: 5vw;}
  .section1 .recommend_2p li .word{width: 36vw; max-width:36vw; max-height:50vw; object-fit: contain;padding: 10px;}
  .section1 .recommend_2p li .product{max-width:50vw; max-height:50vw;position: relative;padding: 8px;right: 0;}
  .section1 .recommend_2p .font{position:relative;left: 0;margin: auto 0;padding: 1vw 3vw;}
  .section1 .recommend_2p li:nth-child(odd){left:0;}
  .section1 .recommend_2p li:nth-child(even){right:0;}
  /*.bg_4 .recommend_2p li:nth-child(1){display: none;}*/
  .section1 .recommend_2p .font h4{font-size:  1.8rem;} 

}

/*領券*/
.banner{margin: 20px auto 10px;padding-bottom: 10px ;}



/*broadwise挖空*/
.broadwise { margin:20px auto;}
.section1 .broadwise {background:url("../images/sp5p_bg01.png")top center no-repeat;}
.section3 .broadwise {background:url("../images/sp5p_bg02.png")top center no-repeat;}
.section6 .broadwise {background:url("../images/sp5p_bg03.png")top center no-repeat;}
.broadwise_sp li:nth-child(2){ margin-left: 386px;}

@media screen and ( max-width: 991px ){
.broadwise_sp{width: 96%; }
.broadwise {width: 100%;margin: 2vw auto;}
.broadwise.sp5p {background:none; }
.broadwise .broadwise_sp  li {width: 97vw;}
.broadwise ul {display: grid;}
.broadwise li {width: 60vw; padding: 2vw; margin: 0.5vw;}
.broadwise_sp{ margin-left: 0px; width:100%;}
.broadwise_sp li:nth-child(2){ margin-left:auto;}
.broadwise_sp ul li{ width: 96vw; display:inline-block;}
.broadwise .broadwise_sp  li{ width: 97vw;}
.broadwise .broadwise_sp  li img{width: 40vw; height: 40vw; padding: 0;}
.broadwise .broadwise_sp  li .font{ width: 40vw;}
.bttsp {	
	background: none;
	padding: 0;
	margin: 15vw auto 0;}
}	


/*品牌情境圖展示 */
.containershow {position: relative;display:flex;width: 1060px;height: 460px;transition: all 0.5s;margin: 30px auto;justify-content: space-evenly;}
.containershow:hover .box {filter: grayscale(100%) opacity(24%);}
.containershow a{width: 180px;}
.box {position: relative;background-size: cover;transition: all 0.5s;display: flex;justify-content: center;align-items: center;}
.containershow .box:hover {filter: grayscale(0%) opacity(100%);}
.box img{width: 100%;object-fit: cover;height: 460px;border-radius: 20px;}
.containershow a:hover{width: 460px;}
.box:nth-child(odd) {transform: translateY(-16px);}
.box:nth-child(even) {transform: translateY(16px);}
.box::before {content: attr(data-text1);position: absolute;background: #fff;color: #000;padding:10px 30px;top: 10px;position: absolute;border-radius: 50px;}
.box::after {content: attr(data-text2);position: absolute;bottom: 20px;background:var(--PV-eslite);color: #fff;padding:10px 30px;text-transform:uppercase;transform: translateY(60px);opacity: 0;transition: all 400ms;border-radius: 50px;}
.box:hover::after {transform: translateY(0);opacity: 1;transition-delay: 0.5s;}

@media screen and ( max-width: 991px ){
.containershow{ margin: 2vw auto;}
.containershow{width: 96vw;flex-direction: row;flex-wrap: wrap;height: auto;}
.containershow:hover .box {filter: grayscale(0%) opacity(1);}
.containershow a{width: 46vw;height:auto;margin: 1vw;overflow: hidden;}
.containershow img{width: 46vw;height:  55vw;}
.box:nth-child(odd) {transform: translateY(0px);}
.box:nth-child(even) {transform: translateY(0px);}
.containershow a:nth-last-child(1){width:100%;}
.containershow a:nth-last-child(1) img{width:100%;}
.box::before {padding:1vw 3vw;top:2vw;}
.box::after {content: attr(data-text2);position:absolute;bottom:2vw;padding:1vw 3vw;text-transform:none;transform: translateY(0px);opacity: 1;transition: all 400ms;border-radius: 50px;display: block;width: 60%;text-align: center;}
}


/*5品+標題 */
.special_5p_1{
  margin: 10px auto;
  background: url(../images/titlebg04.png) top center no-repeat;
}
.special_5p_1 .title_AA h2{ color: #6a2d1a; padding: 15px 0 0 30px;}
.special_5p_1 .hightlight_5p ul li:first-child{height: auto;}
.special_5p_1 .hightlight_5p ul li{height: auto;}

@media screen and ( max-width: 991px ){
  .special_5p_1{
    margin: 2vw auto;
    background: url(../images/titlebg04_m.png) top center no-repeat;
    background-size: 80vw;
    padding: 2vw 0 6vw;
  }
.special_5p_1 .title_AA h2{padding: 5vw 0;}
.special_5p_1 .hightlight_5p ul li:first-child{    height: auto;}
.special_5p_1 .hightlight_5p ul li{height: auto;}
.special_5p_1 .title_AA{height:100px;}	
}
@media screen and ( max-width: 640px ){
  .special_5p_1{
    margin: 2vw auto;
    background-size: 96vw;
  }
}


/*左960AD右兩品 */
.boxmix-forbn .box-mix{align-items: center;padding: 0;justify-content: center;}
.boxmix-forbn .box-mix ul{align-items: center;justify-content: center;}
.boxmix-forbn .box-mix ul.quotes{width: 690px;margin: 0;align-items: center;justify-content: center;}
.boxmix-forbn .box-mix ul.quotes li{background: transparent;padding:0px;width: 670px;}
.boxmix-forbn .box-mix ul.quotes img{width: 100%;max-width: 100%;height: auto;}
.boxmix-forbn .box-mix ul.hightlight{width: 420px;}
.boxmix-forbn .box-mix ul.hightlight li{width: 200px;}
.boxmix-forbn .box-mix ul.hightlight li img{width: 200px;height: 200px;object-fit: contain;}
@media screen and ( max-width: 991px ){
.boxmix-forbn .box-mix ul.quotes{width:94vw;}
.boxmix-forbn .box-mix ul.hightlight{width:46vw;}
.boxmix-forbn .box-mix ul.hightlight li{width:46vw;}
.boxmix-forbn .box-mix ul.hightlight li img{width:46vw;height:46vw;}
}	

/*--輪播 ADx9--*/
.bg_g .swiper {
  width: 1200px;
  padding-top: 50px;
  padding-bottom: 70px;
  margin: 0 auto;
}

.bg_g .swiper-wrapper,
.bg_g .swiper-3d .swiper-slide-shadow-left,
.bg_g .swiper-3d .swiper-slide-shadow-right {
  width: 300px;
  border-radius: 0px;
}

.bg_g .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  margin-bottom: 90px;
}

.bg_g .swiper-slide img {
  display: block;
  width: 300px;
  height: 300px;
  border-radius: 0px;
  border: 1.5px solid #211815;
}

.bg_g .swiper-slide p {
  width: 100%;
  text-align: center;
  padding: 5px 5px;
  font-size: 19px;
  color: #211815;
  font-weight: 500;
  margin-top: 10px;
  line-height: 1.15;
}

.bg_g .swiper-slide h4 {
  background: #4c79bc;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 10px;
  border: 1.5px solid #000;
  outline: 3px #eff3d2 solid;
}

.bg_g .swiper .price {
  text-align: center;
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 14px)) !important;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 14px)) !important;
  margin: 0 3px !important;
}

@media screen and (max-width: 991px) {
  .bg_g .swiper {
    width: 100%;
    padding-top: 2vw;
    padding-bottom: 8vw;
    margin: 0 auto;
  }
  .bg_g .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 80vw;
    height: auto;
    margin-bottom: 25vw;
  }
  .bg_g .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 50vw;
    height: 50vw;
  }
  .bg_g .swiper-slide img {
    display: block;
    width: 50vw;
    height: 50vw;
    border-radius: 0px;
    border: 3px solid #000;
  }
  .bg_g .swiper-wrapper,
  .bg_g .swiper-3d .swiper-slide-shadow-left,
  .bg_g .swiper-3d .swiper-slide-shadow-right {
    width: 50vw;
    border-radius: 0px;
  }
  .bg_g .swiper-slide p {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 5px 5px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2rem;
    margin-top: 6px;
  }
}

/*館別按鈕*/

.btmbg{
  padding-bottom: 10px;
}
.btmbg {
    display: flex;
    justify-content: center;
}
.btmbg a{transition: .5s;}
.btmbg a:hover{transition: .5s; transform: scale(0.95);}

@media screen and ( max-width: 991px ){
.btmbg img{
        width: 100%;
    }
}

/* .half ul */
.slick-slide img{border-radius: 17px ;}
.section4 .half .scene ul{border:none;}
.half ul{ background: url("../images/color-y.jpg") repeat; border: solid 3px #6a2d1a; border-radius: 20px;}
@media screen and ( max-width: 991px ){	
	.hightlight_s .scene img{width: 96vw;}	
}
	
.section2, .section3, .section4, .section5, .section6{ padding: 60px 0 0 ;}
.section1{ padding: 30px 0 0 ;}
@media screen and ( max-width: 991px ){
  .section1, .section2, .section3, .section4, .section5, .section6{ padding: 6vw 0 0 ;}
}

.top_bg{ background: url("../images/kv_02.png") top center no-repeat;}


 /*--goto top--*/          
 #gotop {display: inline-block;background-color: #000; width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}          
 #gotop::after {position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/top.png") center no-repeat;background-size: 50%;background-position: 85% 35%;}         
 #gotop:hover {cursor: pointer;background-color: #666;}          
 #gotop:active {background-color: #ccc;}          
 #gotop.show {opacity: 0.4;visibility: visible;}          
 @media screen and ( max-width: 991px ){          
 #gotop {bottom: 70px;right: 0;margin: 2vw;}
 }         
 /* share url */          
 #share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
 #share::after{position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/share.png") center no-repeat;background-size: 50%;background-position: 80% 35%;}
 #share:hover{cursor: pointer;background-color: #666;}
 #share:active{background-color: #666;}
 @media screen and ( max-width: 991px ){
 #share{bottom:115px;right: 0;margin: 2vw;}
 }                    
 @media screen and ( max-width: 991px ){          
 html{padding-bottom: 80px;}          
 }