#wrap {z-index: 2;}

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 38px;font-weight: 400;letter-spacing: 3px;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

.small_more .pom_cabtn{position: relative;bottom: auto;right: auto;width: min(210px, 100%);margin-top: 60px;}
.center_more{display:flex;justify-content: center;}
.small_more .pom_cabtn .vatitle , #describe .small_more .pom_cabtn .vatitle{font-size: 15px;color: white;letter-spacing: 1px;}
.small_more .pom_cabtn a b:before{border-color: transparent #ffffff transparent;}
.pom_cabtn a{display: grid;grid-template-columns: 60% 26%;gap: 14%;background: var(--primary);border-radius: 10px;font-size: 15px;align-items: center;padding: 0 0;}
.pom_cabtn a b{display:flex;width: 100%;height: 100%;aspect-ratio: 1/1;flex-direction: column;align-items: center;justify-content: center;border-left: #e8e8e8 1px solid;}
.pom_cabtn a b:before {content:"";position: absolute;width: 0;height: 0;border-style: solid;border-width: 6px 10px 6px 0;border-color: transparent #3a3a3a transparent;transform: rotate(180deg);z-index: 9;animation: rotateJa 4s linear infinite;}
.pom_cabtn .vatitle{font-size: max(1.2 * (1vw + 1vh) / 2, 16px);display: flex;width: 100%;justify-content: center;font-family: 'Noto Serif TC';}
.pom_cabtn a:hover{background: var(--secondary);}
.pom_cabtn a:hover *{color:white;}
.pom_cabtn a:hover b:before{border-color: transparent #ffffff transparent;}

@keyframes rotateJa {    0% {transform: rotate(0deg);}     100% {transform: rotate(360deg);}}

/* product_area */
#product_area .title_box, #news_area .title_box {padding-bottom: 1vw;}
#product_area .pageh1, #news_area .pageh1{margin-bottom:3vw;font-weight: 400;font-size: 19px;letter-spacing: 2px;}
#product_area .arrowBox {right: -7.5%;z-index: 10;bottom: 0;display: flex;justify-content: space-between;width: 115%;}
#product_area .arrowBox a{border: 1px solid #d7d7d7;width: 55px;aspect-ratio: 1/1;border-radius: 50px;display: inline-flex !important;align-items: center;justify-content: center;top: -200px;}
#product_area .arrowBox a#product_prev img{transform:scaleX(-1);}
#product_area .arrowBox a#product_next{right:0}
#product_area .arrowBox a:hover{background:var(--primary);border-color:var(--primary)}
#product_area .arrowBox a:hover img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}

/* product_list */
#product_list{position:relative;}
#product_list li{padding: 35px 45px;background: #ffffff;display: flex;flex-direction: column;align-items: center;margin: 0 10px;vertical-align: top;gap: 30px;border-radius: 20px;}
#product_list li .clip img{aspect-ratio:4/3}
#product_list li p{background: #f7f7f7;padding: 8px 40px 9px;font-size: 14px;border-radius: 0 0 10px 10px;font-family: "Tinos", serif;color: #888;text-transform: capitalize;}
#product_list li .h3 {height: auto;font-size: 18px;letter-spacing: 1px;}
#product_list li:hover .h3{color: var(--secondary);}
#product_list li:hover p{background:var(--primary);color:white}

/* about_area */
#about_area {padding-bottom: 5vw;background: linear-gradient(180deg, #f7f7f7, #e3e3e3);padding: 0;}
#about_area .workframe {display:grid;grid-template-columns: 50% 50%;justify-content: space-between;width: 100%;align-items: center;}
#about_area #about_info{padding: 5vw 10vw;}
#about_area .entit {letter-spacing: 1px;}
#about_area .title_box {padding-bottom: 2vw;word-spacing: 100vw;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {margin-bottom: 30px;line-height: 2.2;letter-spacing: 2px;font-weight: 400;text-align: justify;}
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#about_img{height:100%}


/* custom_area */
#custom_area{padding:0;}
#custom_area >p{position:absolute;bottom: 150px;color: white;width: 100%;text-align: center;letter-spacing: 5px;}
#custom_area .video-bg{height: 450px;background: var(--secondary);overflow: hidden;}
#custom_area .video-bg:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;background-image: url(/images/44/customBg.jpg);background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;opacity: .6;}
#custom_area .video-bg:after{content:'';position: absolute;top: 0;width: 100%;height: 100%;background: linear-gradient(
180deg, rgb(28 42 57 / 90%) 30%, rgb(28 42 57 / 0%));}
#custom_area:before{content:'';width:0;height:0;border-style:solid;border-width: 0 51vw 4.6vw 0vw;border-color: transparent transparent #f7f7f7;position:absolute;bottom: 0vw;z-index: 4;left: -1vw;}
#custom_area .video-bg video{opacity:.5;filter: blur(3px);}
#custom_area .wam_img{width:100%;display: flex;flex-direction: column;align-items: center;position: absolute;bottom: -70px;z-index: 5;}

/* news_area */
#news_area li{margin:0 20px;}
#news_area li .img_box , #book_area li .img_box {border-radius: 20px;}
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time { width: 65px; font-weight: 400; font-size: 13px; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li .h3 {margin-top: 25px;height: auto;font-size: 18px;padding: 0 5%;-webkit-line-clamp: 2;letter-spacing: 1px;text-align: justify;}

/* book_area */
#book_area ul{width:min(90%, 1400px);margin: 0 auto;}
#book_area li{margin:0 15px;}
#book_area li .h3 {margin-top: 25px;height: auto;font-size: 18px;padding: 0 5%;-webkit-line-clamp: 2;text-align: left;font-family: 'Noto Serif TC';font-weight: 500;letter-spacing: 1px;text-align: justify;}

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width: 1680px) {
    #product_area .arrowBox{right: -5%;width: 110%;}
}
@media screen and (max-width: 1400px) {
    #custom_area >p{bottom:100px}
}
@media screen and (max-width: 1280px) {
    #product_area .arrowBox{right: -2.5%;width: 105%;}
    #product_area ul{width: 90%;margin: 0 auto;}
}
@media screen and (max-width: 1024px) {
    section {padding: 10vw 0;}
    #product_area .pageh1, #news_area .pageh1{padding-bottom:5vw}
}
@media screen and (min-width: 981px) {
    #custom_area .video-bg:before{background-attachment: fixed;}
}
@media screen and (max-width: 980px) {
    #about_area{padding: 10vw 0 0;}
    #about_area .workframe{display:flex;flex-direction: column;align-items: stretch;gap: 50px;}
}
@media screen and (max-width: 550px) {
    #custom_area .video-bg{height: 220px;}
    #custom_area:before{border-width: 0 51vw 7vw 0vw;}
    section .clip img{height:auto;}
    #custom_area >p{letter-spacing: 3px;bottom: 50px;}
    section .title_box{font-size:30px;}
    section, #about_area {padding: 19vw 0;}
    #about_area {padding-bottom:0}
    #product_area .pageh1, #book_area .pageh1{font-size: 18px;padding: 0 30px 8vw;}
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
    #product_area .arrowBox{position:relative;right: 0;display: flex;justify-content: center;width: 100%;margin-top: 30px;gap: 20px;}
    #product_area .arrowBox a{top: unset;position: relative;}
}