header #cis#wrap { z-index: 5; }
.wrapper{position: relative;}

/* section */
section >* { z-index: 3; }
section .entitle_box {padding-bottom: 3vw;font-size: 3rem;color: #6a6a6a;text-transform: uppercase;font-weight: 500;font-family: 'Tenor Sans';letter-spacing: 1px;}
section .title_box {font-size: 20px;display: inline-flex;align-items: center;gap: 20px;font-weight: 500;letter-spacing: 3px;color: #6a6a6a;}
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%); }

@keyframes rote{0%{transform:transform:rotate(0deg);}
50%{transform:rotate(180deg);}
100%{transform:rotate(0deg);}
}

.title-decoration {position: relative;width: 100px;height: 50px;}
.slash {position: absolute;width: 5px;height: 44px;background-color: #6a6a6a;transform: skewX(-32deg);top: 7px;z-index: 1;}
.slash-1 { left: 0px; }
.slash-2 {left: 16px;height: 36px;}
.horizontal-line {position: absolute;height: 1.5px;background-color: #6a6a6a;top: 25px;left: 16px;width: calc(100% - 14px);z-index: 0;}

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }

/* about_area */
#about_area {display: grid;grid-template-columns: 45% 50%;background: #fdfdfd;gap: 5%;align-items: center;}
#about_area:after{content:'';position: absolute;bottom: 0;right: 0;width: 55%;height: 1px;background: #8e8781;z-index: 2;}
#about_area:before{content:'';position: absolute;right: 5vw;background: #8e8781;z-index: 2;width: 1px;height: 100%;}
#about_area .entitle_box{word-spacing: 100vw;line-height: 1.2;padding-bottom: 45px;}
#about_area .title_box{position:absolute;right: calc(9vw + 20px);top: 84px;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {line-height: 2.5;letter-spacing: 1px;font-weight: 400;color: #6a6a6a;}
#about_area .clip img {width: 100%;aspect-ratio: 4/3;}
#about_area .more_btn{margin-top:70px}

#about_area article p.cooabotitle{
    font-size: 1.5rem;
    font-weight: 500;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
#about_area article p.cooabotitle:before{content:"";position: absolute;width: 10px;height: 10px;background: var(--primary);display: flex;left: -10px;animation: rote 5s linear infinite;}

/* custom_area */
#custom_area {background: #fdfdfd;position: relative;}
#custom_area:after{z-index: 2;content:'';position: absolute;background: #fbf9f4;width: 107px;height: 30%;bottom: 0;left: 0;}
#custom_area .workframe{margin:0;width: 100%;position: relative;}
#custom_area .workframe:before{content:'';position: absolute;right: 5vw;top: 0;width: 200px;height: 100%;background: var(--primary);}
#custom_area .titbox{display:flex;align-items: center;justify-content: flex-start;padding: 145px 0 140px 12%;background: #faf9f5;margin-right: 135px;gap: 70px;}
#custom_area .entitle_box{padding:0;letter-spacing: 6px;}
#custom_area .titbox .btn{border:0;display: flex;gap: 15px;position: absolute;right: calc(20% + 45px);padding: 0;}
#custom_area .titbox .btn a{width:70px;aspect-ratio: 1/1;display: flex !important;background: var(--primary);align-items: center;justify-content: center;border-radius: 50px;}
#custom_area .titbox .btn a:hover{background: #3e7881;}
#custom_area .titbox .btn a#service_prev svg{transform:scaleX(-1);}
#custom_area .titbox .btn a svg{width:20px;height:20px;fill:white} 
#custom_area .bg_box{z-index:-1;height: 610px;bottom: 40px;top: unset;}
#custom_area .servicebox {display: grid;grid-template-columns: 35% 60%;align-items: center;justify-content: space-between;margin-top: -65px;}
#custom_area .servicebox .box{order:2}
#service_img .pageh1{position:absolute;font-size: 15px;writing-mode: vertical-lr;top: 30px;right: 50px;display: flex;flex-direction: row;align-items: center;gap: 15px;font-weight: 400;letter-spacing: 3px;line-height: 1;}
#service_img .pageh1:before{content:'';width: 1px;height: 95px;background: var(--info);position: relative;left: 1px;}
#custom_area .list{width: 90%;margin-bottom: 50px;}
#custom_area .list .info{border-right:1px solid #d5d5d5;padding: 15px 30px;}
#custom_area .list .info:after{content:'';width: 1px;position: absolute;top: 0;right: -1px;height: 60px;background: var(--primary);}
#custom_area .list .info .top{display:flex;align-items: center;justify-content: space-between;}
#custom_area .list .info .top p{display:flex;align-items: baseline;font-size: 37px;gap: 10px;font-weight: 600;font-family: "Montserrat", sans-serif;color: #6a6a6a;}
#custom_area .list .info .top p b{font-size: 18px;font-weight: 600;font-family: "Montserrat", sans-serif;color: #6a6a6a;}
#custom_area .list .info .top .img{height: 80px;aspect-ratio: 1/1;border-radius: 50px;border: 1px solid #cbcbcb;display: flex;align-items: center;justify-content: center;}
#custom_area .list .info .top .img img{width: 60px;}
#custom_area .list .info .h3{font-size: 20px;margin-bottom: 10px;margin-top: 15px;font-weight: 500;letter-spacing: 3px;}
#custom_area .list .info .h3:after{content:'';background: #443930;width: 30px;height: 1px;display: block;margin: 20px 0 15px;}
#custom_area .list .info article{height:auto;-webkit-line-clamp: 2;font-size: 15px;color: #5b544f;text-align: justify;}
#custom_area .more_btn{margin-left: 30px;margin-bottom: 50px;}

/* services-title-section */
#services-title-section {background-color: #ffffff;padding: 80px 100px;box-shadow: 0 15px 40px rgba(0,0,0,0.03);border-left: 4px solid transparent;transition: border-color 0.4s ease;display: none;}
#services-title-section:hover { border-left: 4px solid #5a8e93; }
#services-title-section .box_title { display: flex; flex-direction: column; align-items: flex-start; cursor: default; }
#services-title-section .enetext { font-family: 'Arial', sans-serif; font-size: 14px; color: #5a8e93; letter-spacing: 0.25em; font-weight: 500; margin-bottom: 24px; position: relative; padding-bottom: 12px; text-transform: uppercase; }
#services-title-section .enetext::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 1.5px; background-color: #5a8e93; transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
#services-title-section .box_title:hover .enetext::after { width: 100%; }
#services-title-section .chetext { font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: 38px; color: #333333; line-height: 1.5; letter-spacing: 0.08em; font-weight: 600; text-shadow: 0 1px 1px rgba(0,0,0,0.01); }

@media (max-width: 768px) {
#services-title-section {padding: 50px 15px;border-left: none;}
#services-title-section .chetext { font-size: 26px; line-height: 1.4; letter-spacing: 0.05em; }
#services-title-section .enetext { font-size: 12px; margin-bottom: 18px; padding-bottom: 10px; }
#services-title-section .enetext::after { width: 30px; }
}

/* news_area */
#news_area{background-image:url(/images/44/img-newsBg.jpg);background-repeat: repeat;background-position: 50% 50%;display: grid;grid-template-columns: 37% 63%;align-items: center;gap: 160px;background-size: cover;}
#news_area .bg_box{background-size: 100%;background-position: top;background-repeat: no-repeat;height: 698px;background-size: cover;}
#news_area .entitle_box{line-height:1.2;padding-bottom: 70px;}
#news_area .title_box{position:absolute;right: calc(56% + 20px);top: 5px;}
#news_area .workframe{width:90%;margin: 0;}
#news_area ul{margin-bottom:100px;}
#news_area li{gap: 30px;display:grid;grid-template-columns: 50% 50%;margin: 15px 0;}
#news_area li .more{border-left: 1px solid #756c65;display: flex;align-items: center;font-size: 15px;font-family: "Montserrat", sans-serif;font-weight: 500;color: #584c42;gap: 20px;padding-left: 40px;}
#news_area li .more span{width: 60px;aspect-ratio: 1/1;background: var(--primary);border-radius: 50px;display: flex;align-items: center;justify-content: center;}
#news_area li:hover .more span{background: #675342;}
#news_area li .more svg{width: 17px;height: 17px;fill: white;}
#news_area li .time {font-size: 14px;color: #6a6a6a;font-family: "Montserrat", sans-serif;letter-spacing: 1px;font-weight: 500;}
#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 {height: auto;line-height: 150%;font-size: 18px;-webkit-line-clamp: 1;font-weight: 500;color: #6a6a6a;letter-spacing: 1px;}

/* book_area */
#book_area{margin-top: 0;}
#book_area:after{z-index: 2;content:'';position: absolute;background: #fbf9f4;width: 5.5vw;height: 100%;bottom: 0;left: 0;}
#book_area:before{z-index: 2;content:'';position: absolute;background: #8e8781;width: 1px;height: 115%;bottom: 0;left: 5.5vw;}
#book_area .workframe{width: min(90%, 1680px);margin: 0 0 0 auto;display: grid;grid-template-columns: 45% 55%;align-items: center;}
#book_area .entitle_box{line-height:1.2;padding-bottom: 0;margin-top: 10px;}
#book_area .titbox{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#book_area .title_box{position: relative;right: unset;bottom: unset;top: unset;margin-left: 20px;margin-bottom: 70px;}
#book_area ul{width: 155%;}
#book_area .infootext{margin-bottom:60px;display: none;}
#book_area .infootext p{color:#5b544f;display: none;}
#book_area li >div{display:flex;justify-content: center;align-items: center;}
#book_area li >div a{z-index:5}
#book_area li >div:after{content:'';position: absolute;width: 0;height: 0;background: rgb(70 139 150);opacity: .65;z-index: 0;}
#book_area li:hover >div:after{width:100%;height:100%;}
#book_area li img{aspect-ratio: 146 / 120;width: 100%;}
#book_area li .h3 {height: auto;font-size: 1.5rem;position: absolute;opacity: 0;z-index: 1;width: calc(100% - 51px);margin: 0 auto;text-align: center;}
#book_area li:hover .h3{opacity:1}
#book_area .booklist{position:relative;}
#book_area .btn{border:0;display: flex;gap: 15px;left: -25px;padding: 0;justify-content: space-between;align-items: center;width: 82.5%;bottom: 0;}
#book_area .btn a{width:70px;aspect-ratio: 1/1;display: flex !important;background: var(--primary);align-items: center;border-radius: 50px;cursor: pointer;position: absolute;bottom: 200px;justify-content: center;}
#book_area .btn a#case_next{position:absolute;right: 0;}
#book_area .btn a:hover{background: #3e7881;}
#book_area .btn a#case_prev svg{transform:scaleX(-1);}
#book_area .btn a svg{width:20px;height:20px;fill:white} 
#book_area .booklist {
    width: 100%;
}

#book_area ul {
    width: 100%;
}

#book_area ul.only-one {
    width: 100%;
}

#book_area ul.only-one .slick-track {
    width: 100% !important;
    transform: none !important;
}

#book_area ul.only-one .slick-slide {
    width: 100% !important;
}

#book_area ul.only-one li {
    width: 100%;
}

#book_area ul.only-one li img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
/* photo_area */
#photo_area{background-image:url(/images/44/img-newsBg.jpg);background-repeat:no-repeat;background-position: top left;}
#photo_area:before{content:'';position: absolute;background: var(--primary);width: 208px;height: 100%;bottom: 0;left: 107px;}
#photo_area *{color:white;}
#photo_area .workframe{background-image:url(/images/44/conBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width: min(90%, 1600px);margin: auto 0 auto auto;display: grid;align-items: center;grid-template-columns: 50% 50%;padding: 85px 0;}
#photo_area .box{margin-left:110px;}
#photo_area .tit{font-size:20px;letter-spacing: 4px;font-weight: 500;margin-bottom: 5px;}
#photo_area  p{letter-spacing: 1.5px;font-weight: 300;}
#photo_area .coninfo{display: flex;align-items: center;gap: 75px;}
#photo_area .coninfo *{font-family: "Montserrat", sans-serif;font-weight: 400;}
#photo_area .btnbox {display:flex;flex-direction: column;align-items: center;gap: 10px;}
#photo_area .coninfo a{width:100%;height: 100%;top: 0;z-index: 2;}
#photo_area .coninfo p:nth-child(2){font-size:18px;}
#photo_area .coninfo span{background:white;width: 125px;aspect-ratio: 1/1;border-radius: 150px;display: flex;align-items: center;justify-content: center;}
#photo_area .coninfo .btnbox:hover span{transform: scale(0.9);}
#photo_area .coninfo svg{width:45px;height: 45px;fill: #a28a74;}

@media screen and (max-width: 1680px) {
    #photo_area .workframe{grid-template-columns: 60% 40%;}
    #photo_area .box{margin-left: 250px;}
  
    #about_area:before{right:5%}
    #about_area{grid-template-columns: 45% 50%;}
    #about_area .title_box{right: calc(9vw + 20px);}
    #about_area .clip img{aspect-ratio: 4/3.5;}
    #about_area:after{width: 60%;}
    #custom_area .workframe:before{right:5%}
    #custom_area .bg_box{height: 530px;}
    #service_img .pageh1:before{height: 90px;}
    #news_area .title_box{right: calc(50% + 20px);top: 12px;}
}
@media screen and (max-width:1470px) {
  .title-decoration { width: 70px; }
  .slash {height: 30px;width: 4px;top: 15px;}
  .slash-2 {left: 10px;height: 27px;}
  .horizontal-line { left: 10px; }
  #about_area .title_box { gap: 10px; top: unset; right: unset; position: relative; margin-bottom: 30px; }
  #book_area ul { width: 180%; }
  #custom_area .titbox { padding: 80px 0 120px 7vw; }
  #about_area .entitle_box { padding-bottom: 5px; }
  section .entitle_box { font-size: 3rem; }
  #custom_area .servicebox { grid-template-columns: 36% 60%; }
  #book_area .workframe { grid-template-columns: 52% 48%; }
  #book_area .titbox { padding-left: 40px; }
  #book_area .btn a { bottom: 190px; }
  #book_area .btn { width: 96%; }
}
@media screen and (max-width:1280px) {
    #book_area .workframe{width:100%}
  #book_area:before,#book_area:after,#custom_area:after { display: none; }
  #custom_area .bg_box { height: 460px; }
  #custom_area .list { margin-bottom: 50px; margin-top: 15px; }
}
@media screen and (min-width:1025px) {
    #book_area ul:not(.only-one) {
        width: 130%;
    }

    #book_area ul.only-one {
        width: 100%;
        max-width: 760px;
    }
}
@media screen and (max-width: 1024px) {
	#book_area .titbox{
    padding-left: 0px;
}
    #news_area .workframe{margin: 0 auto;padding: 50px 0;}
    #book_area .btn a{bottom: 300px;}
    #book_area .btn a#case_next{right: -80px;}
    #book_area li img{aspect-ratio:4/3}
    #book_area .title_box{top: 45px;}
    #book_area ul{width:100%}
    #book_area .booklist{margin-top:50px;}
    #book_area .entitle_box{margin:0}
    #book_area{margin:0;padding: 7vw 0;}
    #book_area .workframe{display:block;width: 90%;margin: 0 auto;}
    #custom_area .servicebox{grid-template-columns: 55% 40%;}
    #custom_area .titbox .btn{right: 5%;}
    #custom_area .bg_box{height: 510px;}
    #custom_area .titbox{margin-right:0;padding: 90px 5% 150px;}
    #about_area .clip img{aspect-ratio:5/3}
    #about_area{grid-template-columns: 1fr;gap: 70px;}
    #about_area:after, #custom_area .workframe:before, #photo_area:before{display:none;}
    #about_info{width:90%;margin: 60px auto 0;order: -1;}
    #photo_area .box{margin:0}
    #photo_area .workframe{width: 90%;padding: 80px 5%;}
    #news_area{display:block;}
    #news_area .bg_box{height: 450px;background-size: cover;background-position: 50% 50%;}
    #news_area li{grid-template-columns: 65% 30%;}
}
@media screen and (max-width: 980px) {
    #photo_area .workframe{display: flex;flex-direction: column;align-items: center;gap: 40px;}
    #photo_area .workframe *{text-align:center;}
    #book_area .btn a{bottom: 150px;width: 60px;}
    #book_area .entitle_box{padding-bottom: 5px;}
    #book_area .title_box{position:relative;top: unset;right: unset;margin-bottom: 60px;display: flex;}
    #custom_area .bg_box{display:none;}
    #custom_area .box{background-image:url(/images/44/img-newsBg.jpg);background-size: cover;background-position: bottom;background-repeat: no-repeat;padding: 50px 30px;}
    #custom_area .servicebox{display:block;}
    #service_img{display:flex;gap: 40px;flex-direction: column;margin-bottom: 50px;}
    #service_img .pageh1{position:relative;writing-mode: unset;display: flex;flex-direction: row;align-items: center;top: 0;right: 0;}
    #service_img .pageh1:before{height:1px;width: 15.5%;background: none;}
    #service_img .clip img{aspect-ratio: 10/3;width: 100%;height: auto;object-position: 50% 90%;}
    #custom_area .titbox{display:flex;flex-direction: column;align-items: flex-start;gap: 10px;padding: 90px 5% 90px;}
}
@media screen and (max-width: 760px) {
    #service_img{margin-bottom: 20px;}
    #news_area ul{margin-bottom:60px}
    #news_area li .more{padding-left:30px;}
    #news_area li{display:flex;flex-direction: column;align-items: flex-start;}
    #photo_area .coninfo span{width: 105px;}
    #book_area .btn a#case_next{right: -65px;}
    #book_area .workframe{width: 90%;}
    #book_area{padding:50px 0}
    #custom_area .list{width: 100%;margin: 0;}
    #custom_area .more_btn{display:none;}
    #service_img .pageh1{top: 0;width: 90%;margin: 10px auto 0;line-height: 1.8;letter-spacing: 2px;}
    #service_img .pageh1:before{width: 50px;display: none;}
    #custom_area .titbox .btn a svg{width:16px;height: 16px;}
    #custom_area .titbox .btn a{width: 46px;}
    #custom_area .entitle_box{width: 60%;line-height: 1.2;letter-spacing: 2px;}
    #custom_area .servicebox{margin-top: 0;}
    #about_info{width:85%;}
   #custom_area .titbox{padding: 50px 5% 0;background: transparent;}
	#about_area .entitle_box{padding-bottom: 5px;}
    section .entitle_box{font-size: 30px;letter-spacing: 2px;}
    #about_area:before{display:none;}
    section .clip img{height:auto;}
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
    #about_area .title_box{position:relative;right: 0px;margin-bottom: 10px;}
}
@media screen and (max-width: 550px) {
    #book_area .title_box{margin-bottom: 30px;margin-left: 10px;}
    #about_area article p.cooabotitle{font-size: 19px;margin: 0;}
	section .title_box{margin-left: 10px;gap: 8px;}
	.title-decoration { width: 60px; }
   .slash {height: 23px;width: 3px;}
   .slash-2 {left: 10px;height: 19px;}
   .horizontal-line {left: 10px;}
    #news_area li .more span{width: 45px;}
    #news_area .title_box{position:relative;right: unset;top: unset;margin-bottom: 50px;}
    #news_area .entitle_box{padding:0}
    #news_area .bg_box{height: 370px;}
    #photo_area .coninfo svg{width: 35px;height: 35px;}
    #book_area li{padding: 0 !important;}
    #book_area li img{aspect-ratio:4/3.5}
    #book_area .btn a{bottom: 100px;width: 55px;}
    #book_area .btn a svg{width: 12px;height: 12px;}
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .clip { height: 100vw; }
	#product_list li .info_box { width: 55vw; height: 40vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
	#book_area li .h3{font-size:1.25rem;}
}
@media screen and (max-width: 480px) {
	#about_info{order:-1;width: 90%;margin: 50px auto 0px;}
	#book_area li.row { margin: auto; width: 250px; }
}