/* section */
section {padding: 5vw 0;}
section .area_title .other_txt { font-size: 72px; -webkit-transform: rotate(-11deg) translate(60%, .8em); transform: rotate(-11deg) translate(60%, .8em); }
section .area_title h2 { border-bottom: 1px var(--primary) solid; line-height: 1; letter-spacing: .4rem; font-weight: 300; font-size: 90px; }
section .area_title h3 { font-size: 32px; letter-spacing: .4rem; font-weight: 400; }
section .area_title p { letter-spacing: .2rem; font-weight: 300; font-size: 18px; }
section .arrow_btns_box .arrow { width: 40px; height: 40px; border-radius: 50%; }
section .arrow_btns_box .arrow svg { width: 100%; height: 100%; -webkit-transform: scale(.4); transform: scale(.4); }
section .arrow_btns_box .arrow.next { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
section .title_box {margin-bottom: 40px;position: relative;}
section .title_box .area_title {font-weight: 500;color: #333333;letter-spacing: 1px;font-size: max(1.5 * (1vw + 1vh) / 2, 18px);font-family: "Noto Serif TC", serif;}
section .title_box .sub_title {font-weight: 400;line-height: 1;font-size: max(7 * (1vw + 1vh) / 2, 50px);background: linear-gradient(to top left, #1e032f 0%, #682b7a 50%, #1e032f 100%);background-clip: text;-webkit-background-clip: text;color: transparent;font-family: "Cormorant", serif;display: inline-block;margin-bottom: 5px;}
section .more_btn{background: linear-gradient(to top left, var(--primary) 10%, var(--thirdly)) 50%, var(--primary) 50%;color: var(--light);font-family: "Cormorant", serif;padding: 25px 30px;display: inline-flex;align-items: center;}
section .more_btn svg{fill:#fff;margin-left: 65px;width: 15px;height: 15px;}
section .more_btn:hover svg{margin-left:55px}

/* about_area */
#about_area{padding: 4vw 0;}
#about_area:after{content:'';background: #fff;position: absolute;top: 0;width: 50%;height: 55vh;z-index: -1;right: 0;}
#about_area .workframe{width: 90%;display: grid;grid-template-columns: 55% 42%;}
#about_area .workframe >div{width: auto;}
#about_area .workframe .title_box{position:absolute;z-index: 2;width: 30%;left: 100px;top: 15px;}
#about_area .info_box{width: 40%;margin-top: 5%;}
#about_area .info_box article {margin-bottom: 165px;width: 65%;line-height: 230%;font-weight: 400;font-size: 16px;text-align: justify;color: var(--dark_gary);}
#photo_list{position:relative;display: grid;grid-template-columns: repeat(2, 1fr);}
#photo_list .img_scale {margin: 0 20px 11%;overflow: hidden;}
#photo_list .img_scale:first-child{margin-top: 12vw;margin-bottom: 0;}
#photo_list .slick-current{margin-top: 11%;border-radius: 0 80px 0 0;margin-bottom: 0;}
#photo_list img{aspect-ratio: 3 / 4.5;}

/* custom_area */
#custom_area {position: absolute;right: 6%;bottom: 4vw;display: grid;grid-template-columns: 30% 1fr;width: 60%;align-items: center;}
#custom_area .title_box , #custom_area .title_box p{margin:0}
#custom_area ul{display:grid;grid-template-columns: repeat(4, 1fr);}
#custom_area li{display:flex;flex-direction: column;align-items: center;padding: 0 10px;}
#custom_area li:not(:last-child){border-right: 1px solid #ddd;}
#custom_area li h3{margin-top:15px;word-spacing: 100vw;font-family: "Noto Serif TC", serif;color: #333333;font-size: 17px;font-weight: 500;}

/* product_area */
#product_area {background: var(--light);}
#product_area .btn{padding:0;display: flex;justify-content: flex-end;}
#product_area .btn a{width:70px;aspect-ratio: 1/1;display: flex !important;!i;!;align-items: center;justify-content: center;background: var(--secondary);border-radius: 50px;margin-left: 15px;}
#product_area .btn a svg{fill:var(--light)}
#product_area .btn a#product_prev svg{transform:scaleX(-1);}
#product_area .title_box {display:grid;grid-template-columns: 27% 40% 29%;align-items: end;margin-bottom: 3vw;}
#product_area .title_box p{margin:0;}
#product_area .plist{width: min(90%, 1700px);}
#product_area .slick-list{overflow:unset}
#product_area li{margin:0 25px;}
#product_area li img{background-image: url(/images/00/pdBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#product_area li .info_box{margin-top:15px;}
#product_area li .info_box h3{height:auto;color: #303030;font-size: 18px;font-weight: 500;}
#product_area li .info_box .price_box{    display: flex;    align-items: center;    justify-content: center;}
#product_area li .info_box .price_box .old{color:#696666;text-decoration: line-through;}
#product_area li .info_box .price_box p{color:#af3a4d;font-family: "Lato", serif;font-size: 18px;margin: 0 5px;font-weight: 500;}

/* cate_area */
#cate_area .workframe{width: min(90%, 1500px);}
#cate_area .title_box {display:grid;grid-template-columns: 50% 30% 250px;justify-content: space-between;align-items: end;margin-bottom: 4vw;}
#cate_area .title_box .area_title{word-spacing: 100vw;}
#cate_area .title_box .sub_title{margin: 0;}
#cate_area .more_btn{position:absolute;right: 0;bottom: 0;}
#boxlist {width: 95%;display: grid;grid-template-columns: 44% 54%;justify-content: space-between;align-items: center;}
#boxlist .bgBox{height:100%;}
#boxlist .bgBox iframe{height:100%;width: 100%;}
#boxlist .cateBox{display:grid;grid-template-columns: repeat(6, 1fr);margin: 40px 0;gap: 40px 0;}
#boxlist .cateBox .info{display:flex;flex-direction: column;align-items: center;position: relative;}
#boxlist .cateBox .info a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;}
#boxlist .cateBox .info .photo{width:130px;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;background: var(--light);border-radius: 110px;box-shadow: 0 0 20px rgb(0 0 0 / 10%);margin-bottom: 15px;outline: 1px rgb(0 0 0 / 15%) dotted;outline-offset: -10px;}
#boxlist .cateBox .info:hover .photo{background:var(--secondary);outline: 1px rgb(255 255 255 / 50%) dotted;}
#boxlist .cateBox .info:hover .photo img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#boxlist .cateBox .info h2{font-size:18px;font-weight: 400;letter-spacing: 1px;}

/* book_area */
#book_area{padding:0;background-image: url(/images/40/caseBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#imglist{overflow:hidden;display: grid;grid-template-columns: 17% 83%;align-items: center;}
#imglist .left{border-left: 1px solid rgb(255 255 255 / 30%);padding: 80px 90px;position: relative;}
#imglist .img_box .infoo{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#imglist .img_box .infoo .titleBoxx{font-size:20px;color: #fff;margin-bottom: 30px;width: 100%;font-family: "Noto Serif TC", serif;}
#imglist .img_box .infoo img{aspect-ratio: 5 / 3;width: 75%;}
#imglist .img_box .infoo .tt{width: 35%;right: 8%;padding: 70px;display: flex;flex-direction: column;align-items: flex-start;margin-top: 50px;background-image: url(/images/00/newBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#imglist .img_box .infoo .tt h3{color: #393837;font-size: 22px;height: auto;-webkit-line-clamp: 2;font-weight: 500;font-family: "Noto Serif TC", serif;}
#imglist .img_box .infoo .tt p{height:auto;-webkit-line-clamp: 3;color: #706d6c;text-align: justify;margin: 50px 0 80px;}
#imglist .img_nav .slick-prev{left: calc(50% - 25px);top: -30%;}
#imglist .img_nav .slick-prev:before{content:url(/images/00/arrow-up.png);opacity: 1;}
#imglist .img_nav .slick-next{top: unset;left: calc(50% - 25px);bottom: -30%;}
#imglist .img_nav .slick-next:before{content:url(/images/00/arrow-down.png);opacity: 1;}
#imglist .img_nav .imgg{margin:15px 0;}
#imglist .img_nav .imgg img{border:5px solid rgb(255 255 255 / 0%);aspect-ratio: 3 / 3;border-radius: 100px;width: 80px;margin: 0 auto;}
#imglist .img_nav .imgg.slick-current img{border:5px solid #fff;}


/* animation */
@-webkit-keyframes product_bg { 0% , 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-10%); } }
@keyframes product_bg { 0% , 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@-webkit-keyframes book_element { 0% , 100% { -webkit-transform: translate(-7vw, -1vmax); } 50% { -webkit-transform: translate(-6vw, -1vmax); } }
@keyframes book_element { 0% , 100% { transform: translate(-7vw, -1vmax); } 50% { transform: translate(-6vw, -1vmax); } }

@media screen and (min-width: 1501px) {
	#book_area .area_title { padding: 5vw 40px 6vw calc((100% - 1440px) / 2); width: 650px; }
}
@media screen and (max-width: 1680px){
	#custom_area{right: 3%;width: 65%;grid-template-columns: 25% 1fr;}
}
@media screen and (max-width: 1500px){
	#about_area .workframe{grid-template-columns: 60% 40%;}
	#service_area .workframe { width: 100vw; }
	section .area_title .other_txt { font-size: 4vmax; }
	section .area_title h2 { font-size: 4.2vmax; }
	section .area_title h3 { font-size: 2vmax; }
	#about_area .info_box article{width: 90%;margin-bottom: 120px;}
	#custom_area{grid-template-columns:1fr;position: relative;right: 0;margin: 0 5% 0 auto;}
	#custom_area .title_box{margin: -80px 0 50px 70px;}
	#boxlist .cateBox{grid-template-columns: repeat(4, 1fr);gap: 20px 0;}
	#imglist .img_box .infoo .tt{padding: 35px;}
	#imglist .img_box .infoo img{aspect-ratio:4/3}
}
@media screen and (max-width: 1280px){
	#about_area .workframe .title_box{top:0;left: 30px;}
}
@media screen and (max-width: 1160px){
	#custom_area{width:90%;margin: 5vw auto;bottom: 0;}
	#custom_area .title_box{margin: 0 0 50px 15px;}
	#about_area .info_box article{margin-bottom: 50px;}
	#photo_list .img_scale, #photo_list .img_scale:first-child{margin:0}
	#about_area:after{display:none;}
	#about_area .workframe .title_box{position: relative;width: 100%;}
	#about_area .workframe{grid-template-columns: 1fr;}
	section .area_title h2 { font-size: 6vmax; }
	section .area_title .other_txt { font-size: 5.5vmax; }
	section .area_title h3 { font-size: 3vmax; }
	#discount_area { padding-bottom: 5vw; }
	#discount_area #discount_list { grid-template-rows: 55% 45%; }
	#discount_area #discount_list .info_box { padding: 20px; }
	#discount_area #slogan_box { padding-bottom: 30px; }
	#discount_area #slogan_box:before { display: none; }
	#discount_area #slogan_box .row { padding-left: 80px; }
	#book_area .area_title { width: 400px; }
}
@media screen and (max-width: 1024px){	
	#imglist .img_box .infoo .tt:after{right:0;top: -80px;}
	#imglist .left{padding:80px 50px;}
	#imglist .img_box .infoo .tt{right:0;}
	#imglist .img_box .infoo{align-items: flex-end;}
	#imglist{display:block;}
	#imglist .right, #imglist .left:before, #imglist .left:after{display:none;}
	#boxlist{width:90%;margin: 0 auto;grid-template-columns: 1fr;}
	#boxlist .bgBox{height:50vw}
}
@media screen and (max-width: 980px){
	#imglist .img_box .infoo .titleBoxx{text-align:center;}
	#imglist .img_box .infoo img{aspect-ratio: 3 / 3;width: 130px;border-radius: 100px;border: 5px solid #fff;}
	#imglist .img_box .infoo .tt{position:relative;width: 90%;}
	#imglist .img_box .infoo{display:flex;flex-direction: column;align-items: center;}
	#imglist .left .slick-prev{left: 15%;top: 25%;z-index: 8;}
	#imglist .left .slick-prev:before{content:url(/images/00/arrow-up-left.png);opacity: 1;}
	#imglist .left .slick-next{top: 25%;right: 15%;}
	#imglist .left .slick-next:before{content:url(/images/00/arrow-up-right.png);opacity: 1;}
	#cate_area .more_btn{position:relative;}
	#cate_area .title_box{grid-template-columns:1fr;display: grid;justify-items: start;gap: 10px;}
	section {padding: 8vw 0;}
	#product_area .slick-list{overflow:hidden;}
	#product_area .btn a{margin-left:0;margin-right: 10px;}
	#product_area .btn{justify-content:flex-start;margin-top: 20px;}
	#product_area .title_box{grid-template-columns:1fr;padding: 0 25px;margin-bottom: 6vw;}
	#custom_area li:not(:last-child){border:0}
	#custom_area ul{grid-template-columns: repeat(2, 1fr);gap: 30px;}
	#about_area .info_box article{width:100%;}
	#photo_list img{aspect-ratio:3/4}
	#photo_list{gap:20px;}
	#service_area .custom_list li img { width: 45vw; height: 45vw; }
	#service_area .arrow_btns_box .arrow { bottom: 20vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 25vw; }
	#service_area .arrow_btns_box .arrow.next { right: 25vw; }
	#discount_area #discount_list { grid-template-columns: 1fr; grid-template-rows: 400px 250px; grid-gap: 30px 50px; align-content: center; }
	#discount_area #picture_box { grid-row-end: inherit; }
	#discount_area #picture_box img { height: 400px; }
	#discount_area #slogan_box , #discount_area .diamond_svg { display: none; }
}
@media screen and (max-width: 640px){
	#book_area{background-position: 57% 59%;}
	#imglist .img_box .infoo .tt p{margin: 10px 0 30px;}
	#imglist .left .slick-prev{left: 6%;top: 17%;}
	#imglist .left .slick-next{top: 17%;right: 13%;}
	#imglist .left{padding: 60px 20px;}
	#boxlist .cateBox .info .photo{width: 85px;}
	#boxlist .cateBox .info h2{font-size:16px;}
	#boxlist .cateBox .info .photo img{width: 30px;height: 30px;object-fit: contain;}
	#boxlist .cateBox{grid-template-columns: repeat(3, 1fr);}
	#boxlist{display:block;}
	#product_area li{margin:0}
	#product_area .title_box{padding: 0;}
	#custom_area li h3{margin:0;text-align: left;}
	#custom_area ul{grid-template-columns:1fr}
	#custom_area li{display: grid;grid-template-columns: 25% 72%;align-items: center;justify-content: space-between;}
	#custom_area{margin:10vw auto;}
	#about_area .workframe .title_box{left: 10px;}
	#about_area{padding:10vw 0;}
	#service_area .custom_list li img { width: 60vw; height: 60vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 15vw; }
	#service_area .arrow_btns_box .arrow.next { right: 15vw; }
	#service_area .arrow_btns_box .arrow { bottom: 30vw; }
}
@media screen and (max-width: 550px){
	section .area_title .more_btn { padding-left: 40px; }
	#service_area .custom_list li img { width: 80vw; height: 80vw; }
	#service_area .custom_list li .info_box h3 { height: 1.5em; font-size: 7vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 5vw; }
	#service_area .arrow_btns_box .arrow.next { right: 5vw; }
	#product_area .workframe { flex-wrap: wrap; }
	#product_area .area_title.left { width: 100%; }
	#product_area .area_title.arrow_btns_box { margin-bottom: 1rem; width: 100%; justify-content: end; }
	#product_area #product_list li >div { margin: 30px 20px; }
	#book_area #book_box #book_list li >div img { width: 65vw; }
}