header #webmenu nav >ul >li >p a span/* index.less */
#product_area .list_box ul li{transform:translate(0,0);-webkit-transform:translate(0,0);}@media (min-width:1281px){#product_area .list_box ul li:hover{transform:translate(0,-20px);-webkit-transform:translate(0,-20px);}}#book_area .list_box li .img_box:before,#book_area .list_box li .img_box:after{transform:scaleY(0);-webkit-transform:scaleY(0);}#book_area .list_box li .img_box:after{transform-origin:center bottom;-webkit-transform-origin:center bottom;}@media (min-width:1281px){#book_area .list_box li:hover .img_box:before,#book_area .list_box li:hover .img_box:after{transform:scaleY(1);-webkit-transform:scaleY(1);}}#youtube_box a{width:83px;height:83px;border-radius:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-webkit-animation:spineer 2s infinite;animation:spineer 2s infinite;}

/* header */
header .menu {
    background: var(--white);
    padding: 15px 5%;
}
header #webmenu nav >ul >li >p a {color: var(--white);}

header.scroll { background: rgba(var(--secondary-rgb), .9); }

/* search_box */
#openform { background: rgba(var(--white-rgb), .3); }

/* section */
section {padding: 5vw 0 3vw;}
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {margin-bottom: 50px;}
section .title_box .area_title {font-weight: 400;font-size: 36px;}
section .title_box .sub_title { font-weight: 300; font-size: 23px; }

/* bg_box */
.bg_box { width: 100%; height: 100%; background: no-repeat 50% / cover; background-attachment: fixed; opacity: .3; top: 0; left: 0; }
.bg_box:before { width: 100%; height: 100%; display: block; background: rgba(var(--primary-rgb), .2); content: ""; }
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area{
    background: #fff7f7;
    padding: 5vw 0 5vw;
}
#about_area .workframe {
    display: grid;
    grid-template-columns: 1fr 50%;
    background: var(--white);
    box-shadow: 0px 10px 20px 5px rgb(149 149 149 / 21%);
}
#about_area .img_box img{
    height: 100%;
    object-fit: cover;
}
#about_area .info_box {padding: 40px;}
#about_area .info_box article {margin-bottom: 30px;width: 100%;line-height: 210%;letter-spacing: 1.5px;font-weight: 300;}

/* product_area */
#product_area { overflow: hidden; max-width: 100vw; }
#product_area .slick-list { overflow: visible; }

/* news_area */
#news_area .list_box img { height: 320px; }
#news_area .list_box .info_box { padding: 15px 30px; }
#news_area .list_box .info_box p a { margin-right: 10px; max-width: calc(100% - 100px); font-weight: 400; z-index: 2; }
#news_area .list_box .info_box p .time { width: 90px; font-weight: 300; }
#news_area .list_box .info_box h3 { height: 34px; font-size: 20px; }

/* book_area */
#book_area .list_box img { height: 450px; }
#book_area .list_box .img_box { border: var(--white) solid; border-width: 0 1px 1px 0; }
#book_area .list_box .img_box:before , #book_area .list_box .img_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); z-index: 9; opacity: .4; content: ""; }
#book_area .list_box .img_box:after { right: 0; bottom: 0; }
#book_area .list_box .atag_item { z-index: 10; }
#book_area .list_box .badge { margin: auto; padding: 10px 20px; max-width: calc(80% - 40px); height: 34px; line-height: 36px; font-size: 20px; }

/* youtube_box */
#youtube_box { min-height: 1px; padding-bottom: 30%; }
#youtube_box a { position: absolute; background: var(--white); display: flex; top: 50%; left: 50%; z-index: 99; }
#youtube_box a i { margin: auto; font-size: 30px; color: var(--primary); }
#youtube_box iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }

/* custom_area */
#custom_area{background: var(--primary);padding-bottom: 7vw;}
#custom_area .title_box {display:flex;flex-wrap: wrap;align-items: center;margin-left: 0;margin-right: 0;}
#custom_area .title_box *{color:#fff;}
#custom_area .title_box p{text-align:left;font-size: 45px;font-weight: 500;}
#custom_area .title_box h2{text-align: left;margin-left: 70px;border-left: 3px solid rgb(255 255 255 / 50%);padding-left: 70px;font-size: 15px;}
#custom_area .workframe, #book_area .workframe, #custom_area .workframe{width: min(90%, 1160px);}

/* custom_list */
#custom_list .info_box {padding: 10px 0;width: 100%;}
#custom_list .info_box h3 {font-size: 18px;text-align: center;font-weight: 500;letter-spacing: 1px;position: relative;}
#custom_list .info_box h3 b{position:absolute;right: 30px;}
#custom_list .info_box article { height: 23px; font-weight: 100; font-size: 14px; }
#custom_list .info_box p * { line-height: 100%; font-size: 18px; vertical-align: text-bottom; }
#custom_list .info_box p span { font-weight: 100; margin-right: 2px; font-size: 12px; }
#custom_list .info_box p.price * { font-weight: 600; }
#custom_list .info_box p.old font { font-weight: 100; font-size: 15px; text-decoration: line-through; }
#custom_list{display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;}
#custom_list li{
    position: relative;
}
#custom_list li:hover{transform(
    Y): 1;transform(
    Y): 1;
    transform: translate(0, -3%);
}
#custom_list li .shadow{display: flex;flex-direction: column;align-items: center;margin: 0;background: var(--white);border-radius: 20px;}
#custom_list li .shadow .bgBox{
}
#custom_list li .bgBox img{height: 300px;width: 400px;object-fit: cover;border-radius: 20px 20px 0 0;}

@-webkit-keyframes spineer { 0% { -webkit-box-shadow: 0 0 0 0 var(--info); } 70% { -webkit-box-shadow: 0 0 0 20px transparent; } 100%{ -webkit-box-shadow: 0 0 0 0 transparent; } }
@keyframes spineer { 0% { box-shadow: 0 0 0 0 var(--info); } 70% { box-shadow: 0 0 0 20px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg)}100%{transform-origin:right bottom;transform:rotate(3deg)}}

/*index_co*/
#contact_area{
    padding: 0;
}
#index_co{background-image: url(/images/40/co_bg.jpg);background-attachment:fixed;padding: 7vw 0 7vw;}
#index_co .bbigtitle{display:flex;flex-direction:column;align-items:center}
#index_co .bbigtitle h3{font-size:100px;color:white;font-weight:400;font-family:"Lora",serif}
#index_co .cofle{display: grid;padding:0;grid-template-columns: repeat(3, 1fr);}
#index_co .cofle .tidmco{position:relative;}
#index_co .cofle .tidmco:not(:last-child):before{content:"";width:1px;height:90%;position:absolute;background: rgb(195 13 35);left:calc(100% - 1px)}
#index_co .cofle .tidmco a{display:flex;flex-direction:column;align-items: center;}
#index_co .cofle .tidmco a:hover p, #index_co .cofle .tidmco a:hover b{
    letter-spacing: 3px;
    color: var(--secondary);
}
#index_co .cofle .tidmco .Img{width:40px;aspect-ratio: 1/1;display:flex;flex-direction:column;align-items:center;fill:white;margin-bottom: 10px;}
#index_co .cofle .tidmco p,#index_co .cofle .tidmco b{color: var(--black);text-align:center;font-size: 26px;}
#index_co .cofle .tidmco  p.lee{font-size:22px;font-family:'Noto Sans TC',serif;font-weight:500}
#index_co .cofle .tidmco p.ponn{font-size:40px;font-weight:600;line-height:150%;font-family:"Lora",serif}
#index_co .cofle .tidmco span{color: var(--black);font-size:15px}

/* contact_area */
#contact_area {padding: 0;}
#contact_area .workframe{width: 100%;margin-right: 0;}
#contact_area ul {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#contact_area li{width:calc(100%/3);position: relative;}
#contact_area li .photo{overflow: hidden;}
#contact_area li:hover img{ -webkit-transform: scale(1.1);transform: scale(1.1);}
#contact_area li img{width:100%;}
#contact_area li a{position:absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;}
#contact_area li .innfo {position: absolute;padding: 75px 50px;width: calc(100% - 100px);height: calc(100% - 150px);top: 0;left: 0;}
#contact_area li .innfo b{width: 75px;height: 75px;position: absolute;bottom: 75px;right: 65px;border: 1px solid #fff;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;}
#contact_area li .innfo b svg{fill:#fff;width: 25px;height: 25px;}
#contact_area li .innfo h2 {font-size: 32px;color: var(--white);line-height: 150%;letter-spacing: 3px;}
#contact_area li .innfo article {line-height: 200%;font-family: 'Montserrat', sans-serif;font-size: 20px;color: #fff;}


@media screen and (min-width:1281px){
    #book_area .list_box li:hover .badge{background:var(--primary);color:var(--white)}
    #custom_box li:hover .row{box-shadow:0 4px 17px 0 rgba(var(--black-rgb),.2)}
}
@media screen and (max-width:1280px){
    #custom_area .title_box p{font-size:36px}
}
@media screen and (max-width:980px){
    #about_area .workframe{grid-template-columns:1fr}
    #custom_list{grid-template-columns:repeat(2,1fr)}
    #custom_area .title_box h2{border:0;padding:0;margin:0}
    #custom_area .title_box{display:block}
    #about_area .info_box article span{text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;height:140px;overflow:hidden}
    }@media screen and (max-width:768px){#news_area .list_box .info_box{padding:15px 0}
    #youtube_box{padding-bottom:60vw}
    #custom_box li .row{margin:10px 15px;padding:10px 0}
    #contact_area li{width:100%}
    #contact_area li img{height:250px;object-fit:cover}
    #contact_area li .innfo h2{font-size:28px}
    #contact_area li .innfo article{font-size:18px}
    #contact_area li .innfo{padding:40px 40px;width:calc(100% - 80px);height:calc(100% - 80px)}
}
@media screen and (max-width:640px){
    #book_area .list_box img{height:65vw}
    #custom_list{grid-template-columns:repeat(1,1fr)}
    section .title_box{margin-bottom:20px}
    section .title_box .area_title,#custom_area .title_box p{font-size:30px}
    #index_co .cofle{grid-template-columns:repeat(1,1fr)}
    #index_co .cofle .tidmco a{padding:30px 0}
    #index_co .cofle .tidmco:not(:last-child):before{display:none}
    #index_co .cofle .tidmco:not(:last-child):after{content:'';height:1px;width:90%;position:absolute;background:rgb(195 13 35)}
}
@media screen and (max-width:550px){
    #contact_area li .innfo b{right:20px;bottom:30px}
    #custom_list li .bgBox img{height:200px}
    #product_area .bgBox{width:100%;object-fit:cover}
}