#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0 2vw;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 38px;}
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%; }

/* product_list */
#product_list li {margin: 50px 30px 0;}
#product_list li .clip {margin-bottom: 20px;}
#product_list li .clip img{width: 100%;clip-path: polygon(38% 0, 63% 0, 100% 53%, 92% 53%, 82% 100%, 19% 100%, 9% 53%, 0 53%);height: 270px;}
#product_list li:hover:after{opacity:1;top:-50px}
#product_list li .info_box{margin: 0 auto;}
#product_list li h3 {height: auto;color: var(--primary);font-size: 20px;font-weight: 700;text-align: center;}
#product_list li article {color: #6b7375;font-size: 16px;font-weight: 400;overflow: hidden;height: 50px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin: 12px 0 30px;text-align: center;}
#product_list li p{display:flex;align-items: flex-end;font-size: 14px;color: #6b7375;}
#product_list li p b{color: #bc1f1f;font-family: 'Noto Serif TC', serif;font-size: 21px;line-height: 140%;margin: 0 0 0 10px;}
#product_list .slick-prev{left: -100px;}
#product_list .slick-prev:before{content:url(/images/44/arrow-left.png);opacity: 1;}
#product_list .slick-next{right: -40px;}
#product_list .slick-next:before{content:url(/images/44/arrow-right.png);opacity: 1;}

/* product_area */
#product_area{background-image: url(/images/44/img-product-bg.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding-bottom: 5vw;}

#product_area:after{content:'';position: absolute;bottom: 0px;left: 0;width: 100%;height: 315px;background-image: url(/images/44/img-product-bottom.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#product_area .more{text-align:center;margin: 30px 0;}
#product_area .more a{margin:0 10px;}
#product_area .more a.red{background: var(--secondary);}
#product_area .more a.red svg{fill:var(--secondary)}
#product_area .more a.red:hover svg{fill:var(--white)}
#product_area .more .more_btn.red:hover b{background: var(--secondary);}
#product_area .title_box{margin-bottom: 0;font-size: 22px;font-weight: 400;}
#product_area .title_box b{display:block;text-align: center;letter-spacing: 2px;font-size: 36px;color: var(--primary);}
#product_area .workframe{width: 1140px;}
#product_area .bg_box {z-index:0}

/* about_area */
#about_area {background-image: url(/images/44/bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding-bottom: 10vw;}
#about_area .workframe{width:1160px;padding: 40px 0;}
#about_area:after{content:'';position: absolute;bottom: 65%;left: 0;width: 100%;height: 250px;background-image: url(/images/44/img-about-bottom.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#about_info{display:flex;flex-wrap: wrap;justify-content: space-between;}
#about_info h3 {font-size: 22px;font-weight: 600;width: 400px;position: relative;}
#about_info h3:before{content:url(/images/44/img-title.png);position: absolute;top: -55px;}
#about_info p {margin-bottom: 30px;line-height: 210%;font-weight: 400;width: calc(100% - 490px);text-align: justify;}
@keyframes people{0%{right:0transform-origin:right bottom;transform:rotate(-3deg)}100%{right: 85px;transform-origin:right bottom;transform:rotate(3deg)}}

/* marquee */
#marquee{padding: 50px 0 0;width:100%}
#marquee .view{overflow:hidden;width:100%}
#marquee .pic-container{display:flex;-webkit-animation:marquee 60s infinite linear;animation:marquee 60s infinite linear}
#marquee .pic-container .pic{flex-basis: 480px;flex-shrink:0;overflow: hidden;margin: 0 20px;height: 380px;opacity: .8;filter: saturate(0.8);border-radius: 10%;}
#marquee img{width:100%;vertical-align:middle;height: 100%;}
@-webkit-keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* custom_area */
#custom_area .parallax_svg.top { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area ul li >div { margin: auto; width: 70% }
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 { margin: 10px 0 5px; font-size: 20px; }
#custom_area ul li article {font-weight: 300;font-size: 14px;overflow: hidden;margin: 10px 0 60px;height: 66px;text-align: center;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

/* news_area */
#newsBox {
    margin: 0 auto;
    padding: 0;
    width: 1366px
}
#newsBox:before{content: '';position: absolute;top: 80px;right: 70px;width: 180px;height: 150px;background-image: url(/images/44/img-dog1.png);background-size: contain;background-repeat: no-repeat;animation-name: planet;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;z-index: 0;}
#newsBox:after {
        content: "";
        position: absolute;
        width: 178px;
        height: 140px;
        background: url(/images/44/img-dog2.png);
        background-size: contain;
        background-repeat: no-repeat;
        bottom: -160px;
        left: 10%;
        -webkit-animation: birdJitter2 2s ease-in both infinite;
        animation: birdJitter2 2s ease-in both infinite;
        z-index: 1;
    }
#newsBox .news_line {
	background-image: url(/images/44/img-news-bottom-foot.png);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: cover;
	width: 100%;
	height: 625px;
	position: absolute;
	bottom: 60px;
	z-index: -1;
	left: 0;
	opacity: .3;
	padding-bottom: 20px;
	}
#newsBox .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}

#newsBox .title_box p,#newsBox .title_box h2 {
    text-align: center
}
#newsBox .title_box font{
    font-size: 22px;
}
#newsBox .title_box h2 {
    font-size: 36px;
}

#newsBox .info {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    z-index: 10;
    flex-direction: row-reverse
}

#newsBox .info .titleBox {
    width: 250px;
    margin-right: 30px
}

#newsBox .info .titleBox .title {
    word-spacing: 100vw
}

#newsBox .info .left {
    width: 40%;
    /* margin: 0 auto; */
}
#newsBox .info .left #about_img{
    width: 100%;
    margin: 0;
}
#newsBox .info .right {
    width: calc(100% - 800px)
}

#newsBox .info .more {
    position: inherit
}

#newsBox .info .tit a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 45px;
    letter-spacing: 3px;
    color: #505050;
    font-weight: 500
}

#newsBox .info .btn {
    position: absolute;
    width: 120px;
    text-align: center;
    top: calc((100% - 24px) / 2);
    right: 60px
}

#newsBox .info ul li {
    position: relative;
    font-size: 0;
    margin: 10px 0 10px;
    border-bottom: 1px solid #dedede
}

#newsBox .info ul li a {
    position: absolute;
    width: calc(100% - 0px);
    height: 100%;
    top: 0;
    left: 0
}

#newsBox .info ul li p.time {
    margin-right: 10px;
    width: 95px;
    display: inline-block;
    line-height: 27px;
    font-weight: 300;
    color: #ffffff;
    opacity: 0.5;
    font-family: 'Poppins',sans-serif
}

#newsBox .info ul li p.txt {
    width: calc(100% - 125px);
    display: -webkit-inline-box;
    overflow: hidden;
    font-weight: 300;
    line-height: 160%;
    margin-left: 1%;
    max-height: initial;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #fff;
    letter-spacing: 0.5px
}

#newsBox .info ul li .noBox {
    position: absolute;
    font-weight: 400;
    font-size: 13px;
    top: calc(100% - 22px);
    right: 67px
}

#newsBox .Txt {
    width: 100%;
    position: relative;
    padding: 15px 0 13px
}

#newsBox .Txt .newsInfoBox,#newsBox .Txt .newsInfoBox .dateBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
    align-items: center
}

#newsBox .Txt .newsInfoBox .dateBox .date,#newsBox .Txt .newsInfoBox .dateBox p {
    color: #a4a4a4;
    font-family: 'Oswald',sans-serif
}

#newsBox .Txt .newsInfoBox .dateBox p,#newsBox .Txt .newsInfoBox .dateBox {
    margin-right: 10px
}

#newsBox .Txt .newsInfoBox .classTitle {
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.5px;
    background-color: #848484;
    padding: 10px
}

#newsBox .Txt .title {
    display: block;
    font-size: 19px;
    color: #333333;
    font-weight: 500;
    padding-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 10px
}

#newsBox .Txt article {
    overflow: hidden;
    height: 27px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #787878
}
@keyframes planet{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}

@keyframes birdJitter2 {
        0%,60%,to {
            -webkit-transform: translate(0,0);
            transform: translate(0,0)
        }

        30% {
            -webkit-transform: translate(-3px,0px) rotate(-8deg);
            transform: translate(-3px,0px) rotate(-8deg)
        }

        30% {
            -webkit-transform: translate(0px,0px) rotate(4deg);
            transform: translate(0px,0px) rotate(4deg)
        }

        30% {
            -webkit-transform: translate(-3px,0px) rotate(-6deg);
            transform: translate(-3px,0px) rotate(-6deg)
        }

        80% {
            -webkit-transform: translate(0,0) rotate(3deg);
            transform: translate(0,0) rotate(3deg)
        }
    }
/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

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


@media screen and (max-width: 1680px){
	#about_area .workframe{margin-left: 10%;}
	#newsBox {
        margin: 0 auto
    }
	#newsBox .news_line{
    bottom: -90px;
}
	#product_area .p_infoo:before{right: 30px;}
}

@media screen and (max-width: 1460px){
	#about_area:after{
    bottom: 70%;
}
	#product_area .p_infoo:after{left: 90px;}
	#product_list{
	    margin-left: 30px;
	}
	
	#newsBox {
        width:90%
    }

    #newsBox .info .tit.row {
        padding: 20px 0px 20px
    }
}
@media screen and (max-width: 1366px) {
    #newsBox {
        margin:0 auto;
        width: 768px
    }

    #newsBox {
        width: 85%
    }
}
@media screen and (max-width: 1280px){
	#about_area .workframe{width: 90%;margin: 0 auto;}
	#marquee .pic-container .pic{flex-basis: 470px;height: 470px;}
	#newsBox .news_line{
    bottom: 600px;
}
	#newsBox .info {
        padding: 20px 0;
        display: flex;
        flex-direction: column
    }

    #newsBox .info .left{
        width: 100%;
    }
	#newsBox .info .right {
        width: 100%;
    }
    #newsBox .info .tit.row {
        padding: 10px 0px 0px
    }

    #newsBox .info .row {
    }

    #newsBox .info .title_box {
        width: 170px;
        margin-left: 15px;
        margin-right: 15px
    }
	#product_area .p_infoo:before{right: 10px;top: -110px;}
	#product_area .p_infoo:after{left: 20px;}
	
}

@media screen and (max-width: 1140px){
	#newsBox .info .title_box {
        width: calc(100% - 30px);
        display: flex;
        flex-direction: column;
        align-items: center
    }
}
@media screen and (max-width: 1024px){
	#about_info p{width:100%;margin: 0;}
	#about_info h3{
    margin-bottom: 20px;
}
	#product_area .p_infoo:after{display:none;}
	#product_list {margin: auto;}
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px){
	section { padding-top: 10vw; }
	#product_list .slick-next, #product_list .slick-prev{display: none !important;}
	#product_area .p_infoo:before{display:none;}
	#product_area .workframe{width: 90%;}
	#about_area #about_info { margin-bottom: 8vw; }
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
	#marquee .pic-container .pic{flex-basis: 350px;height: 350px;}
}
@media screen and (max-width: 760px){
	section, #about_area {padding: 50px 0;}
	#about_area .workframe{
    padding: 0;
}
	#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: 50vw;}
	#product_list li .info_box {width: 45vw;height: 20vw;}
	#product_list li .clip img{
    height: 350px;
}
	#newsBox .info .titleBox .title {
        word-spacing: initial
    }

    #newsBox .info {
        display: flex;
        flex-direction: column;
        padding: 20px 0px;
        align-items: center;
    }

    #newsBox .info .titleBox {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px
    }

    #newsBox .info .row {
        width: calc(100% - 30px);
        display: block
    }

    #newsBox .title_box {
        margin-bottom: 10px
    }
	#newsBox:after{
    width: 140px;
    bottom: -80px;
}
}
@media screen and (max-width: 550px){
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .clip {height: 65vw;}
	#product_list li .info_box {width: 55vw;height: 30vw;}
	#product_area .title_box:before{zoom:50%;}
	#product_list li:after{opacity:1;top:-50px}
	#product_list li{margin:50px 10px 0;}
	#product_area .more a{margin:10px 0;}
	#product_list li .clip img{
    height: 250px;
}
	#about_info
	h3{
    font-size: 17px;
}
	#about_area #about_img {
	width: 80vw; }
	#about_area .about_sub_2 {
	bottom: 60vw; }
	#news_area
	li .row { margin: auto;
	width: 280px; }
	#marquee .pic-container .pic{
	flex-basis: 270px;
	height: 270px;
	margin: 0 15px;}
	#newsBox .info .tit.row {
	padding:0px 0px 10px}

    #newsBox .info .tit
	a {
        font-size: 29px}

    #newsBox {
	margin-top: 0
	height: 250px;}
	#newsBox:before{
    width: 130px;
    right: 20px;
    top: 120px;
}
}
@media screen and (max-width: 480px){
	#book_area li .row { margin: auto; width: 250px; }
}