@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;
}

body{background:transparent;}
html{
    background:url("../images/fixedbg.png") top center repeat-y fixed, url("../images/bg.jpg") top center repeat;
}

@font-face {    font-family: チェックポイントフォントCP Font;    src: url("https://events.eslite.com/font/チェックポイントフォントCP Font.ttf");}
h2, h3{ font-family: "Noto Sans TC", sans-serif;}

/*------------------------------ 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; }

/*zero*/
.circle img, .hightlight img, .hightlight_5p img, .circle_5p img { object-fit: contain;}
.alternate ul:nth-child(even){margin: -102px auto 25px;}

.quotes, .crosswise_3p{
    margin-top: 0;
}
.recommend_2p, .triple, .various, .hightlight_5p, .toptitle, .brand, .broadwise, .crosswise_3p, .circle, .rectangle_3p, .hightlight, .photograph, 
.circle_5p, .round_3p, .quotes, .recommend{
    margin-bottom: 0px;
}
.hightlight, .hightlight_5p{margin-top: 0;}
.banner {
    margin:0 auto;
}
.banner {
    padding: 10px 0 20px 0;
}

/*color*/
.half ul{
    background:transparent;
}
.box-mix ul.quotes li{
    background:url("../images/bg1.jpg") center repeat;
}
.hightlight .font h4{
    background:url("../images/bg3.jpg") center repeat;
}
.hightlight3 .scene-nobox .sliderbg, .alternate ul:nth-child(odd) li:first-child, .alternate ul:nth-child(even) li:last-child{
    background:url("../images/bg4.jpg") center repeat;}

.hightlight2 .one-time ul.ot li:nth-child(2), .hightlight2 .one-time ul.ot li:nth-child(6), .hightlight3 .one-time ul.ot li:nth-child(2), 
.hightlight3 .one-time ul.ot li:nth-child(6){
    background:url("../images/bg6.jpg") center repeat;
}
.hightlight2 .one-time ul.ot li:nth-child(4) span, .hightlight3 .one-time ul.ot li:nth-child(4) span{
    background:url("../images/bg9.jpg") center repeat;
}
.alternate ul:nth-child(odd) li:first-child .font h4, .alternate ul:nth-child(even) li:last-child .font h4, 
.alternate ul:nth-child(odd) li:first-child .font .price big, .alternate ul:nth-child(even) li:last-child .font .price big, 
.box-mix ul.quotes .font .price, .box-mix ul.quotes .font .price big{
    color: #bc1d2e;
}
.alternate ul:nth-child(even) li:last-child .font, .alternate ul:nth-child(even) li:last-child .font .price,
.alternate ul:nth-child(odd) li:first-child .font, .alternate ul:nth-child(odd) li:first-child .font .price,
.hightlight2 .one-time ul.ot li:nth-child(3) span, .hightlight3 .one-time ul.ot li:nth-child(3) span{
    color: #444;
}
.slick5itam-2 h4, .slick5itam-2 p, .box-mix ul.quotes .font h4, .box-mix ul.quotes .font p, .hightlight .font h4{ 
    color: #fff;
}

.hightlight_5p .font h4{background:#d04b5e;}

/*title*/
.titleC {
    margin:0 auto;
}
.titleC h2 {
    position: relative;
    padding: 40px 0 50px 0;
    color: #365bc2;
    letter-spacing: 1px;
    background:url("../images/tbg.png") center no-repeat;
    width: 1200px;
    font-size: 4rem;
    line-height: 5rem;
    margin: 0 0 30px 0;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 900;
}

h3{
  color: #fff;
  background: #365bc2;
  width: 60%;
  border-radius: 50px;
  margin: 10px auto;
  padding: 10px 0;
  font-size: 3rem;
  line-height: 3.5rem;
}

.titleC a img {
    position: absolute;
    right: 265px;
    top: 22px;
}

.linkB .titleC.for_m p {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    color: #fff834;
}
.linkB .titleC.for_m p span {
  font-size: 28px;
  padding: 0 3px;
}
.linkB .titleC.for_m span.time {
  font-size: 20px;
  color: #fff;
  background: #de60b4;
  border-radius: 50px;
  line-height: 31px;
  margin: 0px 5px 0 auto;
  padding: 0 10px;
}

/*bg*/
.deco{
  width: 100%;
  background:url("../images/topbg.png") top center no-repeat, url("../images/decobg.png") top center repeat-y, url("../images/deco.png") top center no-repeat fixed;
}
.sbg{
    width: 1250px;
    margin: 50px auto;
    border-radius: 30px;
}
.sbox{
  padding: 30px 0;
  border-radius: 30px;
  background:url("../images/bg1.jpg") top center repeat;
}

/*kv*/
img.bt{
  left: 201px;
  animation: bounceIn 1s;
}
img.kvt{
  top: 544px;
  left: 104px;
  animation: pulse 1s infinite;
  animation-delay: 1s;
}
img.tm{
  right: 276px;
  top: 26px;
}

.topbox img{position: absolute;animation-fill-mode: backwards;}

@media screen and ( max-width: 991px ){
  .topbox{width: 100%;}
  img.bt {
    left: 17vw;
    width: 65vw !important;
    top: -62.5vw;
  }
  img.kvt{
    width: 83vw !important;
    top: -17vw;
    left: 8.5vw;
  }
  img.tm{width: 20vw !important;
    top: -62vw;
    left: 59vw;
  }

}


/*linkbg*/
.linkbg{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.linkbg a{transition: .5s;}
.linkbg a:hover{transition: .5s; transform: scale(0.95);}

.linkA .showByDate{
  width: 1200px;
  margin: 0 auto;
  background:url("../images/link/top_05.png") top center repeat-y;
}
.linkA:before{
  content: '';
  width: 1200px;
  height: 89px;
  display: block;
  position: relative;
  background:url("../images/link/top_03.png") top center no-repeat;
}
.linkA:after{
  content: '';
  width: 1200px;
  height: 60px;
  display: block;
  position: relative;
  background:url("../images/link/top_07.png") top center no-repeat;
}

.linkA p{color: #fff;font-size: 13px;text-align:center;line-height: 18px;padding-top: 10px;}


.linkB{
  background:url("../images/link/top_10.png") top center no-repeat;
  width: 1300px;
  height: 500px;
}
.bbg{
  display: flex;
  justify-content: space-evenly;
}
.bbg a{
  margin-top: 230px;
}
.linkC .showByDate{
  width: 1200px;
  margin: 0 auto;
  background:url("../images/link/top_13.png") top center repeat-y;
}
.linkC:before{
  content: '';
  width: 1200px;
  height: 87px;
  display: block;
  position: relative;
  background:url("../images/link/top_12.png") top center no-repeat;
}
.linkC:after{
  content: '';
  width: 1200px;
  height: 60px;
  display: block;
  position: relative;
  background:url("../images/link/top_14.png") top center no-repeat;
}
.Cbg{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cbox{

}
.linkC {
    position: relative;
    padding-top: 100px;
}
.linkC .titleC{
  position: absolute;top: -25px;
}

.linkD{
  width: 1300px;
  height: 920px;
  display: block;
  position: relative;
  background:url("../images/link/top_17.png") top 100px center no-repeat;
  padding-top: 100px;
}
.d-top {
    display: flex;
    justify-content: center;
    padding-top: 56px;
}
.dd {
    display: flex;
}
.d-btm {
    display: flex;
    justify-content: center;
    padding-top: 30px;
}
.linkD .titleC{
  position: absolute;top: -25px;left: 0;right: 0;
}
.section1{
  margin: 70px auto 0;
}

.linkD a, .titleC a{transition: 0s;}
.linkD a:hover, .titleC a:hover{transition: 0s; transform: scale(1);}



.section2{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.section2 .bg_1200{
  width: 1200px;
  margin: 0 auto;
  background:url("../images/link/top_24.png") top center repeat-y;
}
.section2:before{
  content: '';
  width: 1200px;
  height: 87px;
  display: block;
  position: relative;
  background:url("../images/link/top_21.png") top center no-repeat;
}
.section2:after{
  content: '';
  width: 1200px;
  height: 60px;
  display: block;
  position: relative;
  background:url("../images/link/top_26.png") top center no-repeat;
}
.section2 {
    position: relative;
    padding-top: 100px;
}
.section2 .titleC{
  position: absolute;top: -25px;
}

.d-btm-m{display: flex;}
@media screen and ( max-width: 991px ){

	.linkbg img, .linkA .showByDate, .linkA p, .linkB, .linkC .showByDate, .linkD{
        width: 100%;
        height: auto;
    }
    .linkA:before, .linkA:after, .linkC:before, .linkC:after, .section2:before, .section2:after{
    	display: none;
    }
    .linkA .showByDate, .linkB, .linkC .showByDate, .linkD{
    	background:none;
    }
    .linkA{background:url("../images/bg3.jpg") top center repeat;padding:10px 0;border-radius: 20px;}
    .linkB{background:url("../images/bg2.jpg") top center repeat;padding:0 0 10px 0;border-radius: 20px;margin:10px auto;}
    .linkC{background:url("../images/bg1.jpg") top center repeat;padding:0 0 10px 0;border-radius: 20px;margin:10px auto;}
    .linkD{background:url("../images/bg7.jpg") top center repeat;padding:0 0 10px 0;border-radius: 20px;margin:10px auto;}


    .linkA p{padding-top: 5px;}
    .m-cp2{display: flex;}

    .bbg a{margin-top: 0;}

    .Cbg{flex-wrap: nowrap;    flex-direction: column;}
    .cbox { display: flex;}
    .Cbg1{flex-direction: row;} 
    .cbox1{flex-direction: column;}
    
    .linkD, .section2{padding-top: 0;}

    .d-top{flex-direction: column;padding-top: 0;}
    .d-2{padding-top: 10px;}
    .d-btm{flex-direction: column;padding-top: 0;}
    .d-btm-m{display: flex;flex-direction: row;}
    .section1{margin-top: 0;}

	/*title*/
	.titleC a img {
	    position: absolute;
	    right: 5px;
	    top: 10px;
	    width: 55px;
	}
    .linkC .titleC, .linkD .titleC, .section2 .titleC{position: relative;top: auto;}
    .titleC h2 {
	    font-size: 2.5rem;
	    line-height: 3rem;
	    background-size: contain;
	    margin: 10px auto 0 auto;
	    padding: 10px 0 20px 0;
	}
}

/*special_5p_1*/
.special_5p_1 .hightlight_5p ul li:first-child{height: 430px;}
.special_5p_1 .hightlight_5p ul li{height: 330px;}
.special_5p_1 .title_AA h2{
    color: #fcf5e3;
    font-size: 3rem;
}

.special_5p_1 {
    margin: 10px auto;
    background: url(../images/spbtt_bg_pink.png) top center no-repeat;
}
.special_5p_1 .hightlight_5p ul li{
    margin-top: 110px;
}
@media screen and ( max-width: 991px ){
  .special_5p_1 .hightlight_5p ul li{margin-top: 0;}
    .special_5p_1 .hightlight_5p ul li:first-child, .special_5p_1 .hightlight_5p ul li{height: auto;}
  }
}

/* 三品 box3 bg_2-sw */
.box3 .bg_2-sw{ display: flex;flex-wrap: wrap;width: 1160px;margin: 0 auto;position: relative;}
.box3 .bg_2-sw .half02 { width: 366px; height:530px; margin: 10px 10px; border-radius: 10px; background:url("../images/bg3.jpg") repeat;position: relative;}
.box3 .half02 ul{padding:30px 30px 30px 30px;}
.box3 .half02 ul li a:hover, .half02 ul li:hover{transform: scale(1);}
.box3 .half02 ul li:nth-child(1) img{width: 320px; height: 320px; object-fit: cover ;margin: 40px auto 0;}
.box3 .half02 ul li:nth-child(2){background:url("../images/bg8.jpg") repeat;width: 80px;height: 80px; border-radius: 50%; display: flex;align-items: center;justify-content: center;position: absolute; top: 12px;left:6px;}
.box3 .half02 ul li:nth-child(2) p{font-size: 20px;color: #fff;margin-top: 0;}
.box3 .half02 ul li:nth-child(2) big{font-size: 48px;color: #fff;}
.box3 .half02 ul li:nth-child(3){position: absolute; top: 20px;left: 92px;font-size: 40px; }
.box3 .half02 ul li:nth-child(3) span{font-size: 28px;color:#fff;/*font-weight: bold;*/}
.box3 .half02 ul li:nth-child(4){position:relative; bottom: 0px;left:0px;text-align: left;}
.box3 .half02 ul li:nth-child(4) span{background: url("../images/bg8.jpg");color:#fff;padding: 2px 10px;font-size:20px;text-align: left;line-height: 32px;}
.box3 .half02 ul li:nth-child(5){position:relative; bottom: 0px;left:0px;}
.box3 .half02 ul li:nth-child(5) span{color: #fff;padding: 5px 10px;font-size: 18px;text-align: left;background: url("../images/bg7.jpg");}
.box3 .half02 ul li:nth-child(6){background:url("../images/bg8.jpg") repeat;width: 80px;height: 80px; border-radius: 50%;  top: 440px;right: 10px;display: flex;align-items: center;justify-content: center;position:absolute;}
.box3 .half02 ul li:nth-child(6) p{color: #fff;border-radius: 50%; font-size: 26px;margin-top: 0;}
.box3 .half02 ul li .price p{ font-size: 1.4rem; color: #b73c55; font-weight: bold; line-height: 0.6; padding-bottom: 15px; padding: 5px;}

      .box3 .sw .scene {
        text-align: center;
        font-size: 18px;
      /*  background: #fff;*/

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .box3 .sw .scene img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
@media screen and ( max-width: 991px ){
    .box3 .bg_2 .swiper{ padding-bottom: 0vw;}
    .box3 .bg_2-sw{ display: flex;flex-wrap: wrap;width: 96vw;margin: 0 auto;}
    .box3 .bg_2-sw .half02{ width:94vw; height:auto; margin: 2vw auto;}
    
    .box3 .half02 ul{padding:5vw 2vw 0;}

    .box3 .half02 ul li:nth-child(1) img{width:80vw; height: 80vw; object-fit: contain;margin: 9vw auto 0;}
    .box3 .half02 ul li:nth-child(2){width: 20vw;height:20vw; border-radius: 50%; display: flex;align-items: center;justify-content: center;position:absolute;top: 2vw; left: 2vw;}
    .box3 .half02 ul li:nth-child(2) p{font-size:1.2rem;}
    .box3 .half02 ul li:nth-child(2) big{font-size: 3rem;}
    .box3 .half02 ul li:nth-child(3){position:relative; top: 0;left:0;font-size:2rem;text-align: center;margin-top: 10px;}
    .box3 .half02 ul li:nth-child(3) span{font-size: 2rem;}
    .box3 .half02 ul li:nth-child(4){position:relative; bottom:0;left: 0;top: 0; text-align:center;margin: 20px auto;}
    .box3 .half02 ul li:nth-child(4) span{padding: 5px 10px;font-size:1.4rem;line-height:2.6rem;}
    .box3 .half02 ul li:nth-child(5){position:relative; bottom:0;left: 0;text-align:center;margin: 0 auto;}
    .box3 .half02 ul li:nth-child(5) span{;padding: 5px 10px;font-size: 1rem;text-align:center}
    .box3 .half02 ul li:nth-child(6), .box3 .half02 ul li:nth-child(6) p,.half02 ul li:nth-child(6){display: none;}
    .box3 .half02 .scene { background-position: center; background-size: cover; width:95vw; height: auto;margin-bottom:20px; }
}

/*---- 頁籤 ----*/
.tab{
  padding-top: 20px;
}
.tab ul {
  width: 1160px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.tab ul li {
  width: 230px;
  line-height: 40px;
  position: relative;
  margin: 0;
  vertical-align: bottom;
  padding: 24px 22px 22px 38px !important;
  color: #fff;
  height: 70px;
  background: url("../images/bg2.jpg") top center repeat;
  border-radius: 50px 50px 0 0;
}



.tab ul li p {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.tab ul li.active p {
  color:  #394f9f;
}
.tab ul li.active {
  background: url("../images/bg5.jpg") top center repeat;
}

.tabcontent {
  display: none;
  padding: 20px 0;
  width: 1200px;
  margin: 0 auto;
  background: url(../images/bg5.jpg) top center repeat;
  border-radius: 30px;
}

.tab-title-for-m {
  display: none;
}

@media screen and (max-width: 998px) {
  .tabcontent {
    display: block !important;
    width: 100%;
    background: none;
    border-radius: 20px;
    margin-bottom: 0px;
    padding-bottom: 0;
  }
  .tab {
    display: none;
  }
  .tab-title-for-m {
    display: block;
    width: 300px;
    line-height: 40px;
    position: relative;
    margin: 0px auto;
    padding: 0 !important;
    color: #fff;
    height: auto;
    border-radius: 30px;
    font-size: 2rem;
    line-height: 3rem;
    background: #365bc2;
  }
}

/*crosswise_3p挖空*/
.blk_spa .crosswise_3p{background:url("../images/bw.png") top -60px center no-repeat;}
.blk_spa .crosswise_3p {
    margin: 20px auto 0;
}
.blk_spa ul.crosswise_3p_sp li:nth-child(2){ margin-left: 386px;}

@media screen and ( max-width: 991px ){
    .blk_spa .crosswise_3p{background: none;}
    .blk_spa ul.crosswise_3p_sp li:nth-child(2){ margin-left: 0px;}
}


/* ------------------ 小ＡＤ輪播 ------------------ */
.collect_5x6.slickbg .h-row li{ padding: 0;}
.collect_5x6.slickbg .h-row img{ width: 100%; height: 100%;}

@media screen and ( max-width: 991px ){
.slick-dotted.slick-slider { margin: 2vw auto 0; padding-bottom: 3vw; }
}

/* film-genre */
.film-genre li, .film-genre .font{width: 280px;height: 280px;border-radius: 50%;}
.film-genre .font h4{line-height: 280px;}
.film-genre img{    width: 280px;
    object-fit: cover;
    object-position: 0;
}
@media screen and ( max-width: 991px ){
    .film-genre li, .film-genre .font{
        width: 22vw;
        height: 22vw;
    }
    .film-genre img{width: 22vw}
    .film-genre .font h4{line-height: 22vw;}
}

/*box-mix*/

.box-mix .quotes .font h4:after {
    content: '';
    height: 32px;
    background: url(../images/quote-left.svg) center center no-repeat;
    background-size: 100%;
    display: block;
    margin: 1rem 0;
}
.box-mix .quotes .font:after {
    content: '';
    height: 32px;
    background: url(../images/quote-right.svg) center center no-repeat;
    background-size: 100%;
    display: block;
    margin: 1rem 0;
}

/*---- 日期設定輪播 ----*/
.swiper {position: relative;}
.swiper-slide a {display: block;}
.swiper-slide img {width: 100%;}
.swiper-button-next,.swiper-button-prev {height:30px;top:var(--swiper-navigation-top-offset,60%)}
:root{--swiper-navigation-size:60px!important;}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {opacity: 1;pointer-events: unset;}

.swiper-button-next:after,.swiper-button-prev:after {content: "";background-image: url(../images/arrow.svg);background-repeat: no-repeat;background-position: center;background-size: 30% auto;display: block;border-radius:100%;width: 30px!important;height: 30px!important;background-color:#fe303a;opacity: 1;font-size:0px!important;font-family:serif!important;}

@media screen and (max-width: 991px) {
  .swiper-button-next:after,.swiper-button-prev:after {width: 26px;height: 26px;}
}

.swiper-button-next:after {-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}
.swiper-button-prev,.swiper-rtl .swiper-button-next {left: 0;}
.swiper-button-next,.swiper-rtl .swiper-button-prev {right: 0;}
.swiper-brand a {position: relative;}
.swiper-brand .font {position: absolute;top: 20px;left: 20px; -moz-text-align-last: left;text-align-last: left;}
.swiper-brand h4 {font-size: 25px;margin-bottom: 0.3em;font-weight: 700;text-shadow: 0 0 7px #fff;}
.swiper-brand p {font-size: 20px;font-weight: 700;text-shadow: 0 0 7px #fff;}

/*美妝版*/
.section4 .swiper-brand h4 {font-size: 30px;}
.section4 .swiper-brand p {font-size: 22px;font-weight: 600;color: #e84644;}

@media screen and (max-width: 991px) {
  .swiper-brand h4 {font-size: 18px;margin-bottom: 0;}
  .swiper-brand p {font-size: 14px;}

  .swiper-brand .font {position: absolute;top: 3vw;left: 6vw; }

  .section4 .swiper-brand h4 {font-size: 18px;}
  .section4 .swiper-brand p {font-size: 14px;}


}
.swiper-brand .swiper-container {margin:25px 30px 15px;overflow: hidden;}


/*-- 館別好康 --*/
.swiper-discount{width: 1060px!important;padding: 10px 10px 0px!important;border-radius: 15px;margin: 0 auto 0px;}
#sp3_swiper .insideBox .swiper {margin-top: -20px;}
#sp3_swiper .insideBox .swiper:nth-of-type(2) {margin-top: 10px;}
#sp3_swiper .sp3_item .type {background-color: #eb6986;border: 2px solid #fff;color: #fff;font-size: 22px;font-weight: 500;text-align: center;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;padding: 0.3em 1em;border-radius: 999em;position: relative;left: 50%;-webkit-transform: translate(-50%, 50%);transform: translate(-50%, 50%);}
#sp3_swiper .sp3_item .sp3_item_body {border-radius: 10px;overflow: hidden;background-color: #eb6986;color: #fff;text-align: center;}
#sp3_swiper .sp3_item .txt {padding: 10px;}
#sp3_swiper .sp3_item p {font-size: 19px;font-weight: 500;}
/*.bg_tip3 .bg_1200{margin: 0px auto 40px;padding: 0 5px;}*/
/*.bg_tip3 .bg_1200{padding-top: 5px;}*/
.swiper-brand p span {font-size: 32px;font-weight: 500;}
#sp3_swiper .sp3_item img {width: 200px;height: 200px;object-fit: contain;background: #fff;}
#sp3_swiper .sp3_item p:nth-of-type(1) {padding-bottom: 5px;}
#sp3_swiper .sp3_item span {display: inline-block;color: #fff834;font-size: 19px;}
#sp3_swiper .sp3_item big {color: #fff834;font-size: 25px;}

#sp2_swiper .swiper-slide img{border-radius: 10px;border: 2px solid #fff;} /*border: 3.5px solid #eb6986;*/
#sp2_swiper .swiper-slide{width: 1030px;}


.swiper-discount .swiper-button-prev,.swiper-discount .swiper-rtl .swiper-button-next {left: 0px;}
.swiper-discount .swiper-button-next,.swiper-discount .swiper-rtl .swiper-button-prev {right: 0px;}
@media screen and (max-width: 991px) {
.swiper-discount{width: 96vw!important;padding: 0 4vw 4vw!important;}
#sp3_swiper .sp3_item img {width:42vw;height: 42vw;}


#sp2_swiper .swiper-slide img{border-radius: 10px;border: 2px #000 solid;}
.swiper-brand .swiper-container{margin: 2vw 4vw;}
.bg_tip3 .bg_1200{margin: 0px auto 2vw;padding: 1vw 0;}

.swiper-brand p span {font-size: 20px;font-weight: 500;}
}

/*--輪播 左右箭頭去點點--*/
.slickbg .slick-prev, .slickbg .slick-next{display: block!important;height: 40px;width: 40px;}
.slickbg .slick-prev:before{content: ''; background: url('../images/arrow-f.svg')center center no-repeat,#cd0000cc;background-size: 20px 20px;height: 30px;width: 30px;font-weight: bold;border-radius: 20px;display: block;opacity: 1;z-index: 98;}
.slickbg .slick-next:before{content: ''; background: url('../images/arrow-b.svg')center center no-repeat,#cd0000cc;background-size:  20px 20px;height: 30px;width: 30px;font-weight: bold;border-radius: 20px;display: block;opacity: 1;z-index: 98;}
.slickbg .slick-next{right: -20px;z-index: 98;opacity: 0.6;display: flex!important;justify-content: flex-end;}

.slickbg .slick-prev{left: -20px;z-index: 98;opacity: 0.6;display: flex!important;justify-content: flex-start;}

.slickbg .slick-dots li{display: none;}
.slickbg .slick-dotted.slick-slider {margin: 0!important; padding-bottom:0px !important;}

.bg_3 .slickbg,.bg_ub .slickbg{padding: 20px 0;}

.bg_3 .slickbg .slick-next,.bg_ub .slickbg .slick-next{right: -0px;}
.bg_3 .slickbg .slick-prev,.bg_ub .slickbg .slick-prev{left: -0px;}

@media screen and (max-width: 991px) {
.slickbg .slick-next{right: 0!important;opacity: 0.6;}
.slickbg .slick-prev{left: 0!important;opacity: 0.6;}
}

/* 6品 */
.hightlight_6p{margin: 0 auto;}
.hightlight_6p li{width: 180px;}
.hightlight_6p li img{width: 180px;height: 180px;}

@media screen and ( max-width: 991px ){
    .hightlight_6p li{width:46vw;}
    .hightlight_6p li img{width: 46vw;height:46vw;}
}


/*管別輪播*/

.bg_8 .sliderbg{width:560px!important;padding: 0!important;text-align: center;}
/*.bg_8 .half ul{padding: 0!important;}*/
.bg_8 .sliderbg .hightlight li img{width: 260px;height: 260px;}
.bg_8 .half ul li .hightlight{width:100%;}
.bg_8 .half ul li .hightlight li{width: 160px;height: 160px;}

.bg_8 .slider ul{display: flex;flex-direction: row;flex-wrap: nowrap;background: transparent;}
.bg_8 .slider li{width: 252px;}
.bg_8 .slider li img{width: 252px;height: 252px;object-fit: contain;}
.bg_8 .slick-dots{background: transparent;width: 100%!important;}

.bg_8 .area{background:url("../images/bg-r3.jpg");width: 1160px;margin:60px auto;padding: 10px 0 1px;border-radius: 30px;border: 10px solid #ffb7b8;}
.bg_8 .area .banner{margin: 20px auto 0;padding: 0;}
.hightlight .inner-bn img{width: 512px;}

.bg_8 .area h3{position: relative;margin: -80px auto 10px;font-size: 2.4rem;;color: #fff;padding: 55px 0 0;}
.bg_8 .hightlight h3{position: relative;margin: 0 auto ;font-size: 2.4rem;color: #fff;width: 80%;}
.bg_8 .area .hightlight{margin-bottom: 1px;padding-bottom: 20px;}

@media screen and ( max-width: 991px ){
    .hightlight .inner-bn img{width: 100%;}
    .bg_8 .slider li{width: 46vw;}
    .bg_8 .slider li img{width: 46vw;height: 46vw;}
    .bg_8 .area{width: 100%;margin:2vw auto;padding: 1vw ;}
    .bg_8 .sliderbg{width:100%!important;padding: 0!important;text-align: center;margin-bottom: -20px;}

    /*.bg_8 .area h3{background: url("../images/last-subti.png")top center no-repeat;height: 20vw;position: relative;margin: -4vw auto 0vw;font-size: 2.2rem;padding: 0 0 0;background-size: 90%;display: flex;justify-content: center;align-items: center;}*/
    /*.bg_8 .hightlight h3{height: 24vw;position: relative;font-size: 2.2rem;padding: 40px 0 0 0;background-size: 90%;display: flex;justify-content: center;align-items: center;}*/
    /*.bg_8 .hightlight, .bg_8 .area, .hightlight{margin-bottom: 5vw;}*/
    .bg_8 .slider ul, .bg_8 .half ul{margin: 0 auto !important;}
}

/* ------------------------------ mobile ------------------------------*/

@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; }

    /*witch auto*/
    h2, .sbg, .titleC, .titleC h2 {width: 100%;}

    .container{padding: 0;}

    .sbg {margin: 0 auto}
    .sbox{padding: 15px 0;}

    h3{
	  width: 90%;
	  padding: 0;
	  font-size: 2rem;
	  line-height: 3rem;
	}

	.section10 .half ul{padding: 5px 0;}

    /*.alternate */
    .alternate .font h4{ /*white-space: break-spaces*/;overflow: inherit;}
    .alternate ul:nth-child(even) {    margin: 0px auto 25px;}
    .alternate ul:nth-child(odd) li:first-child .font h4.t4, .alternate ul:nth-child(even) li:last-child .font h4.t4{ padding: 5px 0;}
}

/*--  nav 選單 固定側邊--*/
@media only screen  and (min-width: 992px)  {
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{background:#777;color: #fff;}
.nav-pills .nav-link{border-radius: 0;}
.nav-link:focus, .nav-link:hover{color: #fff;background:#d5425f!important;}
.menustyle2{width: 130px;display: flex;flex-wrap: wrap;background:#de60b4!important; z-index:999;height:auto;position: fixed; top: 100px; right: 10px;border-radius: 0px;flex-direction: row;padding: 0;border: 4px solid #fff;border-radius: 10px;}
#TopMenu2::before{width: 105px;display: flex; flex-wrap: wrap; background: url(../images/menu-top.png); z-index: 99; content: '';height: 36px; position: relative;justify-content: center;margin: -55px auto 0px;}
.menustyle2 ul{width: 130px;margin: 0 auto;display: flex;flex-direction:row;padding:0 ;flex-wrap: wrap;}
.menustyle2 ul li{width:100%;display: flex;justify-content: center;align-items: center;border-bottom: .5px solid #ffffff;}
.menustyle2 ul li.nav-item50-l{width:50%;border-right: .5px solid #ffffff;}
.menustyle2 ul li.nav-item50-r{width:50%;}
/*.menustyle2 ul li:nth-child(2),.menustyle2 ul li:nth-child(6),.menustyle2 ul li:nth-child(7),.menustyle2 ul li:nth-child(8),.menustyle2 ul li:nth-child(9),.menustyle2 ul li:nth-child(13),.menustyle2 ul li:nth-child(14),.menustyle2 ul li:nth-child(15),.menustyle2 ul li:nth-child(16),.menustyle2 ul li:nth-child(17),.menustyle2 ul li:nth-child(18),.menustyle2 ul li:nth-child(19){width:50%;display: flex;justify-content: center;align-items: center;border-bottom: .5px solid #ffffff;}
.menustyle2 ul li:nth-child(3),.menustyle2 ul li:nth-child(6),.menustyle2 ul li:nth-child(8),.menustyle2 ul li:nth-child(10),.menustyle2 ul li:nth-child(14),.menustyle2 ul li:nth-child(16),.menustyle2 ul li:nth-child(18),.menustyle2 ul li:nth-child(20){border-right: .5px solid #ffffff;}*/

.menustyle2 ul li:last-child{border-bottom: 0px solid #11a4a1;}
.menustyle2 ul li a{text-align: center;margin: 0 auto;text-decoration: none;font-size:16px;color:#fff;  font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;letter-spacing: 1px;font-weight: 500;width: 100%; height: 100%; display: flex;justify-content: center; align-items: center;padding: 8px 0px;line-height: 1.1;}
.menustyle2 ul li.menutitle,.menustyle2 ul li.menutitle:hover{width: 100%;padding: 0px 0px;background:url("../images/bg-r1.jpg");color: #0b4f64;}

.menustyle2 ul li.menutitle:nth-child(1),.menustyle2 ul li.menutitle:nth-child(1) a{border-radius: 10px 10px 0 0;}


.menustyle2 ul li:hover{ background:url("../images/bg-r3.jpg");transform: scale(1);color: #fff!important;}
#TopMenu ul li a:hover{ background:url("../images/bg-r3.jpg")!important;transform: scale(1);color: #fff!important;}

.menustyle2 ul li.menutitle p,.menustyle2 ul li.menutitle p:hover{width: 100%;padding: 10px 0px;background:#405bbc;color: #fff;text-align: center;font-size: 18px;font-weight: bold;background-size: 100%;}

.menustyle2 ul .active,.nav-pills .nav-link.active{color: #fff;background:#d5425f!important;width: 100%; height: 100%;border-radius: 0;}

/*.menustyle2 ul li:nth-child(2),.menustyle2 ul li:nth-child(13){width: 100%;}*/
}
@media screen and ( max-width: 991px ){
  .menustyle2{width: 100%; z-index:999;padding:0px 0; display: none;background:#000;}
  .menustyle2 ul{width: 100%;margin: 0 auto;display: flex;flex-wrap: wrap;}
  .menustyle2 ul li{width:30%;font-size:20px;color:#ffffff;display: flex;justify-content: center;align-items: center;border-right: .5px solid #ffffff;box-sizing: border-box;}
  .menustyle2 ul li a{font-size:1.1rem;letter-spacing: 0px;font-weight:500;color:#ffffff;font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;box-sizing: border-box;padding: 5px 0;}
  .menustyle2 ul .active{color: #fffa96!important;background:none;width: 100%;justify-content: center;align-items: center;text-align: center}
  .menustyle2 ul li a:hover{color: #fffa96!important;width: 100%;justify-content: center;align-items: center;text-align: center}
  .sticky {position: fixed;top: 0;}
}

#MobileMenu,#MobileMenu2{width: 100%; z-index:999;padding:0px 0;background:#d5425f;}
li.dropdown{width: 33.3vw;display: flex;justify-content: center;border-right: 0.5px solid #fff;}
#MobileMenu li:nth-last-child(1),#MobileMenu2 li:nth-last-child(1){border-right: 0;}
#MobileMenu li a,#MobileMenu2 li a{color: #fff;justify-content: center;}
.dropdown-menu{background:#de60b4;min-width: 8rem;padding: 0 10px; z-index: 999;}
.dropdown-menu li{width: 100%;justify-content: center;}
.dropdown-item{justify-content: center;display: flex;padding: 12px 0;border-bottom: 0.5px solid #ffffff77;}
.dropdown-item-last{border-bottom: 0px solid #fff;}

/**--  下拉選單  --**/
@media screen and ( max-width: 991px ){
#MobileMenu,#MobileMenu2 {transition: background-color 1s, opacity 1s, visibility 1s;opacity: 0;visibility: hidden;z-index: 1000;position: absolute;top: 0;}
#MobileMenu.show,#MobileMenu2.show {opacity: 1;visibility: visible;position: fixed;top: 0;} 
}

/*--goto top--*/          
#gotop {display: inline-block;background-color: #000;opacity:0.3;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: 80% 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;}          
}