@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{position: relative;}
html{background:url("../images/bg.jpg")center repeat-y fixed,url("../images/bg-repeat.jpg") top center fixed;}



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

.title01{ position: absolute;top:149px; left: 52px;z-index: 90;}
.title02{ position: absolute;top:208px; left: 189px;z-index: 90;}
.title03{ position: absolute;top:133px; left: 280px;z-index: 90;}
.title04{ position: absolute;top:146px; left: 392px;z-index: 90;}
.title05{ position: absolute;top:294px; left: 24px;z-index: 90;}
.title06{ position: absolute;top:351px; left: 172px;z-index: 90;}
.title07{ position: absolute;top:307px; left: 273px;z-index: 90;}
.title08{ position: absolute;top:55px; left: 85px;z-index: 90;}

.titledeco1{ position: absolute;top: 273px;left: 516px;z-index: 90;animation-name:ani02; animation-duration: 7s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-direction: alternate;}
.titledeco2{ position: absolute;top: 434px;left: 1142px;z-index: 90;animation-name:ani02; animation-duration: 6s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-direction: alternate;}
@keyframes ani02{0%{ transform:translateX(0px);} 20%{transform:translateX(5px);}  55%{transform:translateX(0px);} 75%{transform:translateX(6px);}  100%{transform:translateX(0px);}}

.title-sale{ position: absolute;top:495px; left: 68px;z-index: 90;}


.titleC{ margin: 0px; padding: 64px 0 55px;}
.titleC h2{font-size: 60px;font-weight: 800;color: #1c4e64;letter-spacing: 3px;}

.block{ margin: 0 auto; max-width: 1920px; padding: 1px 0;}
/*.block:nth-child(odd){ background:#ccc;}*/
.bg_1200{ width:1160px; min-width:1160px; margin:0 auto;}
/* 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; }
	.block{ margin: 0 auto; max-width: 100%; padding: 0vw 0;}
	.bg_1200{ width:100%; min-width:100%; margin:0 auto;}
	.titleC{ margin: 0px; padding: 5vw 2vw 2vw;background: none;}
	.titleC h2{font-size: 2.2rem;letter-spacing: 0;background:url("../images/bg-paperBL2.png");padding: 3vw 5vw;border-radius: 30px; color: #fff;}
}


.kv_pc .hightlightFont{background: none; position: absolute;top:83px; left: 637px;z-index: 92;}
.hightlightFont ul.scene{width: 530px;padding: 0;}
.bg_1 .banner ul li{margin: -5px;}
.bg_1 .banner ul li:nth-child(3){margin:0px;}
.bg_1 .banner ul li:nth-child(odd){margin-top: -50px;}


.bg_1 .banner img{width: 270px;}
@media screen and ( max-width: 991px ){
.bg_1 .banner img{width: 100%;}
.bg_1 .banner ul li{margin:1vw;}
.bg_1 .banner ul li:nth-child(odd){margin-top:1vw;}
.bg_1 .banner{margin: 0 auto;}
}




.bg_1{background: url("../images/round.png") center 50px  repeat,url("../images/bg-lg.jpg");}
.bg_2{background:url("../images/round.png") center -570px  repeat, url("../images/bg-lg.jpg");}
.bg_3::before{content: '';width: 1920px;min-width: 1200px; margin: 0 auto;background: url("../images/bg1-b.png")center top no-repeat;height: 200px;display: block;margin-top: -2%;position: relative;}
.bg_1 .titleC{background: url("../images/subti.png")center top no-repeat;margin: 40px auto;}
.bg_2 .titleC{background: url("../images/subti.png")center top no-repeat;margin: 10px auto 0;}
.bg_2 .banner{margin: 0 auto;padding-bottom: 0;}
.bg_3 .slickbg{margin-top: 30px;}



.bg_6{background:url("../images/round.png") center 0px  repeat, url("../images/bg-lg.jpg");}
.bg_7{background:url("../images/round.png") center -383px  repeat, url("../images/bg-lg.jpg");padding-bottom: 30px;}
.bg_3 .titleC{background: url("../images/subtitle3.png")center top no-repeat;margin: -20px auto 30px;}
.bg_4 .titleC,.bg_5 .titleC{background: url("../images/subtitle3.png")center top no-repeat;margin: 30px auto 30px;}
.bg_4 .baseline ul li{border-radius: 20px;box-shadow: 3px 3px 3px #263f0d33;}
.bg_4 .baseline ul li .font{padding-top: 8px;}
.bg_5 .subtitle{background: url("../images/subtitle-s.png")center top no-repeat; padding: 30px 0 46px;margin-bottom: -20px;}
.bg_5 .subtitle h3{padding: 4px 0 0 55px;border-left: 0px;color: #c76007;}
.bg_5 .subtitle .more a{color:#97d8e9;}
.bg_5 .subtitle .more{padding: 33px 60px 0 0;}
.bg_5 .banner{margin: -10px auto 0;padding: 0 0 30px;}
.bg_5::after{content: '';width: 1920px;min-width: 1200px; margin: 0 auto;background: url("../images/bg6-b.png")center top no-repeat;height: 200px;display: block;margin-bottom: -2%;position: relative;}
.bg_6{padding-top: 30px;}
.bg_6 .titleC{background: url("../images/subti.png")center top no-repeat;margin: 40px auto;}
.bg_7 .titleC{background: url("../images/subtitle2.png")center top no-repeat;margin: 30px auto 30px;}
.bg_5 .hightlight_5p .font p{padding: 5px 10px;}

@media screen and ( max-width: 991px ){
.bg_1 .titleC,.bg_2 .titleC,.bg_3 .titleC,.bg_4 .titleC,.bg_5 .titleC,.bg_6 .titleC{background:none;margin: 0vw auto;padding:2vw 0 0;}
.bg_3::before,.bg_5::after{display: none;}
.bg_1{background: url("../images/bg-paperBL.png")}
.bg_6{padding-top: 1vw;}
}

.special_5p_1 .hightlight_5p ul li,.special_5p_1 .hightlight_5p ul li:first-child{height: auto;}
.title_AA h2{position: relative;background: url("../images/subtitle-s2.png")top center no-repeat;padding: 30px 0 50px; margin-left: 30px;}
.special_5p_1 .title_AA{margin:11px 0 0 100px;}
.special_5p_1 .title_AA h2{padding: 43px 70px 43px 0px;margin-top: 8px;color: #1e536a;}
.title_AA .more{position: relative;top: 77px;right: -968px;}
.title_AA .more a{color:#1e536a;}
.bg_6 .hightlight_5p_font h4{background: none; padding: 10px 10px;border-radius: 30px;color: #fff;display: flex;justify-content: center;align-items: center;height: 140px;font-size: 30px;line-height: 36px;}
.bg_6 .hightlight_5p_font h4 a{color: #000;}
.bg_6 .hightlight_5p_font ul li{background:url("../images/papero.png");width: 220px;border-radius: 30px;box-shadow: 3px 3px 3px #263f0d33;}
.bg_6 .hightlight_5p_font ul li:last-child{width: 1144px;margin-top: 30px;}
.bg_6 .hightlight_5p_font ul li:last-child h4{background:url("../images/bg-paperg2.png");font-size: 50px;line-height: 36px;letter-spacing: 10px;color: #fff;}
.hightlight_5p .font h4,.hightlight .font h4{background: #1c4d62;}
.special_5p_1 .hightlight_5p ul li h4{background: #f1903c;}

@media screen and ( max-width: 991px ){
.special_5p_1 .title_AA,.special_5p_1 .title_AA h2{height: auto;position: relative;padding: 0 0 0 2vw;text-align: left;font-size: 2.6rem;color: #fff;}
.special_5p_1 .title_AA{margin-bottom: -5vw;}
.title_AA .more{top:-7vw;;right:2vw;margin: 0 auto;position: relative; float: right;font-size: 1.4rem;}
.special_5p_1 .hightlight_5p{padding: 0;}
.special_5p_1{padding-top: 0;margin: 0 auto;}
.hightlight_5p ul{width: 100%;}
.title_AA .more{position: relative;top: 70px;right: -1080px;}
.bg_6 .hightlight_5p_font h4{padding:1vw;height:20vw;font-size: 1.4rem;line-height:1.6rem;}
.bg_6 .hightlight_5p_font ul li{width: 46vw;}
.bg_6 .hightlight_5p_font ul li:last-child{width: 96vw;margin-top: 4vw;}
.bg_6 .hightlight_5p_font ul li:last-child h4{font-size: 1.8rem;line-height:2rem;letter-spacing: 3px;}
.bg_6 .hightlight_5p_font ul li:first-child h4{width: 46vw;}
.bg_6 .hightlight_5p_font ul li:first-child{width: 46vw;margin:0vw;padding: 0;}

.bg_5 .subtitle h3{padding: 2vw 0 2vw 5vw;color: #fff;}
.bg_5 .subtitle .more{padding: 5vw 5vw 3vw 0;color: #fff;}
.bg_5 .subtitle .more a{color: #fff;}
.title_AA h2{background: none;}
.bg_5 .subtitle{background: url("../images/bg-paperg2.png");padding: 2vw 0;width: 94vw;color: #fff;}
.special_5p_1 .title_AA{background: url("../images/bg-paperg2.png");padding: 2vw 0;width: 94vw;margin: 0 auto;color: #fff;}
.title_AA .more{right: 3vw;top: -5vw;color: #fff;}
.title_AA .more a{color: #fff;}
.bg_7 .titleC{background: none;margin: 0 auto;}
.bg_6 .hightlight_5p{margin-bottom: 0;padding-bottom: 4vw;}
}

/*--六品不輪播--*/
.bg_3 .swiper{width:100%; padding-top: 0px; }
.bg_3-sw{ display: flex;flex-wrap: wrap;width: 1080px;margin: 0 auto;position: relative;}
.bg_3-sw .half02 { width: 340px; height:480px; margin: 10px 10px; border-radius: 20px; background:url("../images/bg-paperg2.png");position: relative;box-shadow: 3px 3px 3px #263f0d33;}
.half02 ul{padding:30px 30px 30px 30px;}
.half02 ul li a:hover, .half02 ul li:hover{transform: scale(1);}
.half02 ul li:nth-child(1) img{width: 320px; height: 320px; object-fit: cover ;margin: 40px auto 0;}
.half02 ul li:nth-child(2){background:url("../images/bg-paperBL2.png");width: 80px;height: 80px; border-radius: 50%; display: flex;align-items: center;justify-content: center;position: absolute; top: 12px;left:6px;}
.half02 ul li:nth-child(2) p{font-size: 20px;color: #fbe434;margin-top: 0;}
.half02 ul li:nth-child(2) big{font-size: 48px;color: #fbe434;}
.half02 ul li:nth-child(3){position: absolute; top: 20px;left: 92px;font-size: 40px; }
.half02 ul li:nth-child(3) span{font-size: 28px;color: #fff;/*font-weight: bold;*/}
.half02 ul li:nth-child(4){position:relative; bottom: 10px;left:0px;text-align: left;}
.half02 ul li:nth-child(4) span{background: #fbe434;color: #1c4d62;padding: 5px 10px;font-size: 14px;text-align: left;}
.half02 ul li:nth-child(5){position:relative; bottom: -10px;left:0px;}
.half02 ul li:nth-child(5) span{background: #fbe434;color: #1c4d62;padding: 5px 10px;font-size: 18px;text-align: left;}
.half02 ul li:nth-child(6){background:url("../images/papero.png");width: 80px;height: 80px; border-radius: 50%;  top: 380px;right: 10px;display: flex;align-items: center;justify-content: center;position:absolute;}
.half02 ul li:nth-child(6) p{color: #fff;border-radius: 50%; font-size: 26px;margin-top: 0;}
.half02 ul li .price p{ font-size: 1.4rem; color: #1c4d62; font-weight: bold; line-height: 0.6; padding-bottom: 15px; padding: 5px;}


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

      .sw .scene img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

@media screen and ( max-width: 991px ){
	.bg_3 .swiper{ padding-bottom: 0vw;}
	.bg_3-sw{ display: flex;flex-wrap: wrap;width: 96vw;margin: 0 auto;}
    .bg_3-sw .half02{ width:94vw; height:auto; margin: 2vw auto;}
	
	.half02 ul{padding:5vw 2vw 0;}

	.half02 ul li:nth-child(1) img{width:80vw; height: 80vw; object-fit: contain;margin: 2vw auto 0;}
	.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;}
	.half02 ul li:nth-child(2) p{font-size:1.2rem;}
	.half02 ul li:nth-child(2) big{font-size: 3rem;}
	.half02 ul li:nth-child(3){position:relative; top: 0;left:0;font-size:2rem;text-align: center;margin-top: 10px;}
	.half02 ul li:nth-child(3) span{font-size: 2rem;}
	.half02 ul li:nth-child(4){position:relative; bottom:0;left: 0;top: 0; text-align:center;margin: 20px auto;}
	.half02 ul li:nth-child(4) span{padding: 5px 10px;font-size:1.4rem;}
	.half02 ul li:nth-child(5){position:relative; bottom:0;left: 0;text-align:center;margin: 0 auto;}
	.half02 ul li:nth-child(5) span{;padding: 5px 10px;font-size: 1rem;text-align:center}
	.half02 ul li:nth-child(6) p,.half02 ul li:nth-child(6){display: none;}
	.half02 .scene { background-position: center; background-size: cover; width:95vw; height: auto;margin-bottom:20px; }
}




/* precaution */
.precaution {
    width: 1200px;
    margin: 0 auto;
    color: #1c4e64;
    padding: 70px 100px;
    border-radius: 30px;
    background:url("../images/bg-paperBL.png");
}
.precaution ul { padding: 0 0 0 26px;text-align: justify;}
.precaution ul li { list-style: circle;; margin: 8px 0;}
.precaution li:hover { transform: none;}
.precaution ol { padding: 0 0 0 26px;text-align: justify;}
.precaution ol li { list-style: decimal; margin: 8px 0;line-height: 1.5;}
.precaution h4{ color: #1c4e64; font-size: 24px; margin: 20px 0 10px 0; text-align: left; font-weight:bold;}
.precaution h4 b { color: #1c4e64 ;font-size: 22px; margin: 10px 0;}
.precaution h5{ color: #1c4e64; font-size: 20px; margin-top:10px;}
.precaution span{ color: #1c4e64;}
	@media screen and ( max-width: 991px ){
		.precaution {
            width: 96vw;
            margin: 0 auto;
            padding: 6vw 0;
            border-radius: 0;
        }
        .precaution .txt {
            width: 90%;
            margin: 0 auto;
        }
		.precaution ol { padding: 0 0 0 6vw ;}
		.precaution ol li { margin: 2vw 0;}
		.precaution h4{ color: #1c4e64; font-size: 1.2em; margin: 20px 0 10px 0; text-align: left; font-weight:bold;}
		.precaution h5{ color: #1c4e64; font-size: 1em;}
	}


.hightlight_5p img{object-fit: contain;}

/*--永久改動--*/
@media screen and ( max-width: 991px ){
		.rectangle_3p ul li:nth-child(3n+1) {width: 94vw; padding: 3vw; margin: 1vw 3vw; }
		.rectangle_3p ul li:nth-child(3n+1) a { flex-wrap: nowrap; }
		.rectangle_3p ul li:nth-child(3n+1).font {padding: 1vw 0vw 1vw 3vw; }}


/*--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 {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:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 991px ){
	#gotop {bottom: 25px;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{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:20px;background-position:50% 30%;}#share:hover{cursor: pointer;background-color: #666;}#share:active{background-color: #666;}
@media screen and ( max-width: 991px ){#share{bottom: calc(2vw + 60px);right: 0;margin: 2vw;}}
	
	
/*--  nav --*/
#TopMenu{width: 100%;display:none;flex-wrap: nowrap;background:url("../images/bg-paperBL2.png"); z-index:999;height: 50px;}
#TopMenu ul{width: 1200px;margin: 0 auto;display: flex;}
#TopMenu ul li{width:20%;display: flex;justify-content: center;align-items: center;border-right: .5px solid #ffffff;}
#TopMenu ul li:last-child{border-right: 0px solid #ffffff;}
#TopMenu ul li a{text-align: center;margin: 0 auto;text-decoration: none;font-size:20px;color:#ffffff;	font-family: "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;letter-spacing: 1px;font-weight: 500;}
#TopMenu ul li:hover,#TopMenu ul li a:hover{ background:#777;transform: scale(1);}
#TopMenu ul .active{}
#TopMenu ul .active{color: #fff;background:url("../images/bg-paperg2.png");}


@media screen and ( max-width: 991px ){
#TopMenu{height: 30px;padding:0px;display: flex;}
#TopMenu ul{width: 100%;margin: 0 auto;display: flex;overflow-x: auto;
white-space: nowrap;}
#TopMenu ul li{width:100%;border-right: .5px solid #ffffff;}
#TopMenu ul li a{font-size:1.1rem;letter-spacing: 0px;font-weight: 300;}
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
  }
}

@media screen and ( max-width: 991px ){
#swiper-3,#swiper-4{width: 50vw; position:absolute;}
#swiper-3 .scene1,#swiper-4 .scene1{background: none;position: absolute;width: 50vw;top:-65vw; left: 0vw;}
#swiper-3 .scene2,#swiper-4 .scene2{background: none;position: absolute;width: 50vw;top:-65vw; left: 50vw;}
#swiper-3 ul,#swiper-4 ul{width:50%;}
#swiper-3 ul li img,#swiper-4 ul li img{width: 50vw;}
.hightlight_s .scene li{width: 50vw;}
}