@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:100,400,900);
/* CSS Document */
body, html { height:100%; }
body {
  font-family: 'Lato', '微軟正黑體', sans-serif; /*自行增減使用 */
  font-size: 20px;
  line-height: 1.8;
  color:#021d32;
  letter-spacing: .1rem;
  text-align: justify;
}
a{color:#000;text-decoration:none}
a:hover{color:#777;text-decoration:none;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.txt{margin-bottom:30px}
p{margin-bottom: 0;}
/*反白設定*/
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
/*---------------------- 頁面開始 ----------------------*/
h1{font-size: 4.6rem;}
h2{font-size: 4.2rem;}
h3{font-size: 3.2rem;}
p{font-size: 1.7rem;letter-spacing: 3px;}
.container{width:100%;max-width:1280px}
/*zone01*/
.zone01{position:relative;z-index:2}
.zone01 .logo{position: absolute;top: 15vw;left: 20vw;}
.zone01 .logo>img.pc-logo{display:block;}
.zone01 .logo>picture.m-logo{display: none;}
.zone01 .pic{position: absolute;left: 50vw;top: 35vw;transform: rotate(-100deg);}
.zone01 .pic01{position: absolute;bottom: 90vw;left: 0;}
.zone01 .pc-bg img{width: 100%}
.zone01 .pc-bg{display: block;width: 100%;}
.zone01 .m-bg{display:none;}

.banner{}
.owl-carousel.banner .owl-item img.pc{}
.owl-carousel.banner .owl-item img.mb{display:none;}
/*zone04*/
.zone04{padding:120px 0;background: #e2e6e7;}
.owl-carousel.owl-zone04 .owl-nav [class*=owl-] {color: #FFF;padding: 50px 20px!important;text-indent: -99999999px!important;background:url(../images/all/prev-icon.png) no-repeat!important;position: absolute;top: 45%;overflow: hidden;}
.owl-carousel.owl-zone04 .owl-nav .owl-prev{float: left;background: url(../images/all/prev-icon.png) no-repeat;left: -65px;}
.owl-carousel.owl-zone04 .owl-nav .owl-next{float: right;transform: scaleX(-0.9);right: -65px;}
.zone04-word{text-align: center;margin-top: 50px;border-top: 1px solid #021d32;padding-top: 20px;}
.zone04-word h3{font-size: 2.8rem;}
.zone04-word .icon{display:inline-block;vertical-align: middle;margin:5rem 1rem 0}
.zone04-word .icon svg{width: 3rem;height: 3.25rem;color: #021d32;}
.zone04-word .icon.facebook svg{width: 2.75rem;}
.zone04-word .icon.facebook path{fill: transparent;stroke: #021d32;stroke-width: 4rem}
/*block2*/
.mark-style:before{content:'';position:absolute;left:0;bottom:0;width:1px;height:50px;background:#7a3831;-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg);-ms-transform-origin:right bottom;-webkit-transform-origin-x:right;transform-origin:right bottom}
.custom-accordion{position:relative;color:#FFF;}
.custom-accordion img{max-width:100%;max-height:100%;margin:  0 auto;}
.custom-accordion .item{padding:30px;margin:0 auto;clear:both;overflow:hidden}
.custom-accordion .item.it_1{background: url('../images/pro/it_1_760-760.jpg?20200727') no-repeat center/cover;}
.custom-accordion .item.it_2{background: linear-gradient(to right, rgba(255, 182, 21, 0.46) 0%,rgba(255, 210, 164, 0.75) 100%),url(../images/pro/it_2_760-760.jpg?20200727) no-repeat center/cover;}
.custom-accordion .item.it_3{background:url('../images/pro/it_3_760-760.jpg?20200727') no-repeat center/cover;}
.custom-accordion .item:last-of-type{background:#0e3637;text-align:center;border-radius:.5rem}
.custom-accordion .item:last-of-type .icon{color:#FFF;float:none;margin:auto;width: 100%;position:  absolute;bottom: 5vw;right: 0;}
.custom-accordion .item:last-of-type img+img{margin-top:15px}
.custom-accordion .item:nth-of-type(6){padding-bottom:2rem}
.custom-accordion .item .icon{/* color:#462521; */font-size:2rem;width:50%;/* float: left; */}
.custom-accordion .item .icon, .custom-accordion .item .summary{display: inline-block;vertical-align: middle;width: calc(100% / 2 - 10px);}
.custom-accordion .item .title{font-size:3.6rem;line-height: 1;margin-bottom: 2rem;}
.custom-accordion .item .title span{font-size:2.5rem}
.custom-accordion .item.it_1,.custom-accordion .item.it_1 .title{color:#1d383c}
.custom-accordion .item.it_2,.custom-accordion .item.it_2 .title{color:#7b3832}
.custom-accordion .item.it_3,.custom-accordion .item.it_3 .title{color:#fce9be}
.custom-accordion .item.it_2 .title{letter-spacing: 1rem;}

@media screen and (min-width: 800px) {
  .render{text-shadow:#FFF .006em .006em 0.007em,#9c9c9c 1px 1px 1px,#9c9c9c 1px 2px 1px,#9c9c9c 1px 3px 1px,#9c9c9c 1px 4px 1px,#9c9c9c 1px 5px 1px,#9c9c9c 1px 6px 1px,#9c9c9c 1px 7px 1px,#9c9c9c 1px 8px 1px,#9c9c9c 1px 9px 1px,#9c9c9c 1px 10px 1px,#9c9c9c 1px 11px 1px,#9c9c9c 1px 12px 1px,rgba(16,16,16,0.4) 1px 18px 6px,rgba(16,16,16,0.2) 1px 22px 10px,rgba(16,16,16,0.2) 1px 26px 35px,rgba(16,16,16,0.4) 1px 30px 65px,#fff -.15em -.1em 100px}
  .render-block:hover .render{margin-top:-20px;margin-bottom:20px;text-shadow:#fff .006em .006em 0.007em,#9c9c9c 1px 1px 1px,#9c9c9c 1px 2px 1px,#9c9c9c 1px 3px 1px,#9c9c9c 1px 4px 1px,#9c9c9c 1px 5px 1px,#9c9c9c 1px 6px 1px,#9c9c9c 1px 7px 1px,#9c9c9c 1px 8px 1px,#9c9c9c 1px 9px 1px,#9c9c9c 1px 10px 1px,#9c9c9c 1px 11px 1px,#9c9c9c 1px 12px 1px,rgba(16,16,16,0.4) 1px 38px 26px,rgba(16,16,16,0.2) 1px 42px 30px,rgba(16,16,16,0.2) 1px 46px 65px,rgba(16,16,16,0.4) 1px 50px 95px,#fff -.15em -.1em 100px}
  .render br{display:none}
  .custom-accordion{width:100%;margin:0 auto;max-height:1000px;overflow:hidden;padding-bottom:0;display:flex}
  .custom-accordion .item{width:25%;float:left;position:relative;padding:200px 30px 30px;text-align:center;-webkit-transform-origin:0 50%;transform-origin:0 50%;transition:all .3s cubic-bezier(0.8,0.16,0.42,0.89);clear:inherit;}
  .custom-accordion .item>*{z-index:2}
  .custom-accordion .item:not(:last-of-type):hover{background:inherit}
  .custom-accordion .item.it_1{background: url('../images/pro/it_1_760-760.jpg?20200727') no-repeat center/cover;}
  .custom-accordion .item.it_2{background:url('../images/pro/it_2_480-850.jpg?20200727') no-repeat center/cover;}
  .custom-accordion .item.it_3{background:url('../images/pro/it_3_480-850.jpg?20200727') no-repeat center/cover;}  
  .custom-accordion .item:hover:not(:last-of-type){-webkit-transform:scaleX(2) translateX(-1px);transform:scaleX(2) translateX(-1px);box-shadow:0 0 3rem #301916;border-color:transparent}
  .custom-accordion .item:not(:last-of-type):before{content:'';display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:#ccc;z-index:-1}
  .custom-accordion .item:hover:before{display:block;-webkit-transform: scaleX(.5) translate(-50%,0);transform: scaleX(.5) translate(-50%,0);width: 1000px;}
  .custom-accordion .item.it_1:hover:before{background:url(../images/pro/it_1_780-710.jpg?20200727) no-repeat center/cover}
  .custom-accordion .item.it_2:hover:before{background:url(../images/pro/it_2_780-710.jpg?20200727) no-repeat center/cover;background: linear-gradient(to left, rgb(255, 198, 72) 0%,rgba(255, 210, 164, 0) 100%),url(../images/pro/it_2_760-760.jpg?20200727) no-repeat center/cover;}
  .custom-accordion .item.it_3:hover:before{background:#f5e0ba;background:url(../images/pro/it_3_780-710.jpg?20200727) no-repeat center/cover}
  .custom-accordion .item:hover + .item{opacity:0}
  .custom-accordion .item:hover + .item:last-of-type{background:#8A6552}
  .custom-accordion .item:last-of-type{width:25%;border-radius:0}
  .custom-accordion .item:last-of-type .heart-icon{font-size:6rem}
  .custom-accordion .item:hover:last-of-type .heart-icon{-webkit-transform:scale(2);transform:scale(2)}
  .custom-accordion .item:last-of-type .title{-webkit-transform:rotate(0) translateX(-50%) translateY(-2.5rem);transform:rotate(0) translateX(-50%) translateY(-2.5rem);padding:0;text-align:center}
  .custom-accordion .item:last-of-type .content{opacity:1;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
  .custom-accordion .item:hover:not(:last-of-type) .icon{-webkit-transform:scaleX(.5) translateX(-50%);transform:scaleX(.5) translateX(-50%);margin:0;-webkit-filter:drop-shadow(0 15px 15px rgba(0,0,0,0.8))}
  .custom-accordion .item:hover:not(:last-of-type) .title{-webkit-transform: scaleX(0.5);transform: scaleX(0.5);/* margin-top:100px; */margin-bottom: 2rem;text-align:left;padding:0 1rem;top: inherit;bottom: 50%;font-size:4.8rem;}
  .custom-accordion .item:hover:not(:last-of-type) .title .text{left:0;right:0;font-size:3.8rem}
  .custom-accordion .item:hover:not(:last-of-type) .content{opacity:1;color:#1d383c}
  .custom-accordion .item.it_1:hover .title,.custom-accordion .item.it_1:hover .content{color:#0e3637}
  .custom-accordion .item.it_2:hover .title,.custom-accordion .item.it_2:hover .content{color:#7b3832}
  .custom-accordion .item.it_3:hover .title,.custom-accordion .item.it_3:hover .content{color:#f5e0ba}
  .custom-accordion .item .icon{position:relative;float:none;width:70%;font-weight:700;font-size:2rem;transition:all .3s cubic-bezier(0.8,0.16,0.42,0.89);color:#FFF;margin:auto}
  .custom-accordion .item .title{position:absolute;top:0;left:50%;text-align:left;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:rotate(90deg);transform:rotate(90deg);width:150px;text-align:center}
  .custom-accordion .item .title .text{transition:all .3s cubic-bezier(0.8,0.16,0.42,0.89);font-size:4rem;line-height:1}
  .custom-accordion .item .title .text span{font-size:2.5rem;letter-spacing:.5rem;font-weight:400}
  .custom-accordion .item .content{position:absolute;top:50%;left:100%;width:100%;height:auto;-webkit-transform: translateX(-75%) scaleX(0.5);transform: translateX(-75%) scaleX(0.5);transition:all .3s cubic-bezier(0.8,0.16,0.42,0.89);opacity:0;padding:1rem;pointer-events:none;text-align:left;}

}
@media (min-width: 800px) and (max-width: 1024px) {
  .custom-accordion .item{padding-bottom:150px}
  .custom-accordion .item:hover:not(:last-of-type) .title .text{line-height:1.1;font-size:2.8rem}
  .custom-accordion .item:hover:not(:last-of-type) .title .text>span{font-size:2.8rem}  
}
.heart-icon{color:#CA2E55;font-size:3rem;transition:all .3s cubic-bezier(0.8,0.16,0.42,0.89)}

[class^="cf_"] img{max-width:100%;max-height:100%}
[class^="cf_"]{position:absolute;z-index:2;pointer-events:none}
.cf_1{top:63%;left:12vw;width:250px}
.cf_2{width:12%;right:3vw;bottom:-10%}
.cf_3{position:fixed;z-index:-1;width:12%;right:10%;bottom:0;filter:blur(10px);opacity:.5}
.cf_4{position:fixed;left:5%;top:37vw;z-index:0}
.cf_5{z-index: -1;right: 10%;bottom: 30px;width: 20%;}

[class^="block"] [class^="cf_"]{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);-webkit-transition:all 3s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all 3s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all 3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all 3s cubic-bezier(0.165,0.84,0.44,1);transition:all 3s cubic-bezier(0.165,0.84,0.44,1)}
[class^="block"]:hover [class^="cf_"]{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
[class^="block"] [class^="cf_"] + [class^="cf_"]{-webkit-transition:all 5s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all 5s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all 5s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all 5s cubic-bezier(0.165,0.84,0.44,1);transition:all 5s cubic-bezier(0.165,0.84,0.44,1)}

@media (min-width: 1200px) {
  .zone04 .container.aa{width: 1100px}
}
@media (min-width: 992px){
  .zone04 .container.aa {width: 950px}
}
@media (max-width: 1680px) { 
  .zone01 .pic{left:43vw}
} 

@media (max-width: 1280px) { 
  .zone01 .pic{width: 35%}
  .zone04{position: relative;z-index: 2;margin-top: -20px;}
  .zone01 .pic01{width: 50%}
}

@media (max-width: 1024px) {
  .owl-carousel.owl-zone04{max-width: 80%;margin:0 auto;}
  .custom-accordion .item:last-of-type .icon{bottom:10vw;}
}
@media (max-width:800px) { 
  .custom-accordion .item:last-of-type{display: none;}
}
@media (max-width:768px) { 
  body{letter-spacing:0;line-height: 1.5;}
  .custom-accordion .item:last-of-type{display: none;}
  .zone01 .pc-bg{display:none;width: 100%;}
  .zone01 .m-bg{display:block;}
  .zone01 .pic,.zone01 .pic01{ display: none }

}

@media (max-width: 640px) { 
  .zone04-word h3{font-size: 1.8rem}
  .owl-carousel.banner .owl-item img.pc{display:none}
  .owl-carousel.banner .owl-item img.mb{display:block}
}

@media (max-width: 480px) { 
  .custom-accordion .item .title{font-size: 2.8rem;line-height: 1.1;margin-bottom: 15px;}
  .custom-accordion .item .content{font-size:1.5rem}
  .zone04{padding:50px 0px;}
  .owl-carousel.owl-zone04 .owl-nav .owl-next{right: -55px;}
  .owl-carousel.owl-zone04 .owl-nav .owl-prev{left:-55px;}
  .zone04-word p{font-size: 12px;}
  /*block2*/
  .custom-accordion .item{padding: 15px 5px;}
}