section#productBox{padding:0vw 0}
section{position:relative;padding:5vw 0}
section >.bg{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;opacity:.3}
section >.info{position:relative;font-size:0;z-index:2}
section .title{line-height:120%;text-align:center;font-family:'DM Serif Display',serif;font-size:55px;letter-spacing:1.5px}
section .more{margin-top:40px;text-align:center}
section .more a{position:relative;padding:15px 100px;border:1px #383838 solid;background-color:383838;display:inline-block;color:#ffffff;border-radius:555px}
section .more font{text-align:center;font-family:'Montserrat','Noto Sans TC',sans-serif;text-transform:uppercase;letter-spacing:3px;color:#ffffff}
section .more a svg.arrow{position:absolute;width:20px;right:7px;top:calc((100% - 11.41px) / 2)}
section .more.white a,section .more.white font{padding:18px 40px;letter-spacing:1px;font-size:12px}
section .more.white span{right:30px;position:absolute;width:80px;height:1px;background:#000;display:block;right:0;top:calc((100% - 1px) / 2);z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s}
section .more.white:after{width:252px}
section .more.white span{position:absolute;width:80px;height:1px;background:#5a5a5a;display:block;right:-50px;top:calc((100% - 1px) / 2);z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s}
section .more.white span:before{position:absolute;width:0;height:0;border-style:solid;border-width:0 16px 7px 0;border-color:transparent transparent #5a5a5a transparent;right:-1px;bottom:50%;content:""}
section .more.white a:after{position:absolute;width:0;height:100%;background:#d20320;display:block;top:0;left:0;content:"";z-index:1;-webkit-transition-duration:.2s;transition-duration:.2s}
#wrap{position:relative;overflow:hidden;background:#131921;background: linear-gradient(to bottom, #030008, #131921);}
#wrap .wrapBg{position:absolute;z-index:1}
#wrap .wrapBg.diamond{width:16vw;height: 34vw;background: rgb(21 21 21 / 75%);top: 5vw;right:0vw}
#wrap .wrapBg.diamond.bottombox{width:1467px;height:1467px;bottom:-430px;top:auto}


/* bgTxt */
.bgTxt{position:absolute;z-index:1}
#aboutBox .bgTxt.stitle{top:6vw;font-size:250px}
.bgTxt.stitle{-webkit-writing-mode:vertical-lr;writing-mode:vertical-lr;font-size:120px;font-family:'DM Serif Display',serif;color:rgb(234 234 234 / 72%);line-height:50%;text-transform:uppercase;-webkit-text-stroke:1px rgb(167 167 167 / 20%);-webkit-text-fill-color:transparent}
.bgTxt.title{width:100%;text-align:right;font-size:140px;color:#edf1f3}
.bg2Txt.stitle{-webkit-writing-mode:vertical-lr;writing-mode:vertical-lr;font-size:120px;font-family:'DM Serif Display',serif;color:rgb(234 213 186 / 72%);line-height:50%;text-transform:uppercase;font-weight:100;-webkit-text-stroke:1px rgb(167 167 167 / 20%);-webkit-text-fill-color:transparent}
.bg2Txt.title{width:100%;text-align:right;font-size:140px;color:#edf1f3}

/* newsBox */
#newsBox{margin:-110px auto 0;padding:0;margin-left:auto;margin-right:150px}
#newsBox .text-parallax{background:no-repeat 0 0;display:inline-block;position:relative;left:calc(90% - 130px);top:130px;z-index:2;opacity: 0;}
#newsBox .text-parallax-content{font-size:130px;line-height:1;overflow:hidden;mix-blend-mode:darken;-ms-mix-blend-mode:darken;text-transform:uppercase;left:0;font-family:'DM Serif Display',serif;font-weight:700;letter-spacing:1.5px;display:inline-block;position:relative;color:#ffffff;background-image:url(/images/37/ab-t-bg.jpg);background-size:320%;background-position:50% -170%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#newsBox .info{width:calc(100% - 90px);display:inline-block;vertical-align:text-bottom}
#newsBox .info .row{display:revert;margin-right:0;margin-left:0}
.info .tit.row{width:100%;line-height:120%;text-align:left;font-size:45px;color:#ffffff;letter-spacing:1.5px;padding:0px 0px 0px;z-index:15;text-transform:uppercase;border-bottom:1px solid #333;margin-bottom:0px}
.info .tit.row span{letter-spacing:2.5px;font-size:18px}
.info .tit.row:after{width:80px;height:1px;display:block;content:"";margin-top:15px;background:rgb(3 143 173)}
#newsBox .info .more{text-align:right;position:absolute;margin-top:0px;top:60px;left:500px}
.info .tit a{font-family:'DM Serif Display',serif;text-transform:uppercase;font-size:45px;letter-spacing:3px;color:rgb(3 143 173);display:block}
#newsBox .info .btn font{margin:0 15px;font-size:0;display:inline-block}
#newsBox .info .btn font span{margin-left:10px;display:inline-block;font-weight:400;font-family:'Montserrat','Noto Sans TC',sans-serif;font-size:13px}
#newsBox .info .btn font span:first-child{padding-left:18.03px}
#newsBox .info ul li{position:relative;padding:10px 0 0;width:25%;font-size:0;transition:0.9s;background:#131920}
#newsBox .info ul li:after{content:"";width:calc(1px + 100%);height:calc(1px + 100%);display:block;background:#1a1a1a;position:absolute;z-index:5;opacity:0;top:-1px;left:-1px;transition:0.8s}
#newsBox .info ul li:hover:after{opacity:1}
#newsBox .info ul li:before{content:"";width:1px;height:calc(100% - 40px);display:block;background:#262626;left:0;bottom:0;position:absolute;z-index:1}
#newsBox .info ul li .item{padding:40px;position:relative;z-index:10}
#newsBox .info ul li .date{font-size:12px;color:#999;display:flex;font-family:'Montserrat',sans-serif;align-items:center;padding-bottom:10px}
#newsBox .info ul li:hover .date{color:#fff}
#newsBox .info ul li .date strong{line-height:40px;padding-right:10px;font-size:40px;font-family:'DM Serif Display',serif;font-weight:300}
#newsBox .info ul li .date b{line-height:15px;font-weight:normal;transform:translateY(0px);font-family:'DM Serif Display',serif}
#newsBox .info ul li h3{margin-bottom:40px}
#newsBox .info ul li h3 a{color:#666666;font-size:20px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:25px;height:50px;overflow:hidden}
#newsBox .info ul li:hover h3 a{color:#fff}
#newsBox .info ul li p a{color:#666666;font-size:15px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:25px;height:50px;overflow:hidden}
#newsBox .info .btn{padding-top:30px}
#newsBox .info .btn a{color:#a7a7a7;padding:10px 20px 10px 0;font-family:'Montserrat',sans-serif;font-weight:900;position:relative;display:inline-block}
#newsBox .info .btn a span{position:relative;z-index:10;font-size:13px}
#newsBox .info .btn a:before{width:0px;height:100%;content:"";display:block;position:absolute;z-index:0;background:rgb(49 49 49 / 45%);transition:0.6s;top:0;left:0}
#newsBox .info .btn a:hover:before{width:100%}
#newsBox .info .btn a:hover{color:#fff;padding:10px 20px}
#newsBox .info .btn a:after{content:"";display:inline-block;opacity:0;position:relative;transform:translateX(20px);z-index:11;width:0;height:0;border-style:solid;border-width:4px 0 4px 8px;border-color:transparent transparent transparent #ffffff;transition:0.6s}
#newsBox .info .btn a:hover:after{opacity:1;transform:translateX(10px)}


/* productBox */
#productBox .bg{opacity:1.2}
#productBox >.info{margin:0}
#productBox ul{margin-top:0vw}
#productBox ul li{position:relative}
#productBox ul li a{position:absolute;width:100%;height:100%;display:block;top:0;left:0;z-index:5}
#productBox ul li >div{overflow:hidden;position:relative;margin:0 0px;z-index:0}
#productBox ul li .img:before{position:absolute;width:100%;height:100%;background:rgb(0 0 0 / 0%);display:block;top:0;left:0;opacity:0;z-index:2;content:""}
#productBox ul li .img img{position:relative;width:100%;height:680px;object-fit:cover;z-index:1;display:block;width:100%;-webkit-transition:all 8s linear;-o-transition:all 8s linear;transition:all 8s linear}
#productBox ul li:hover:after{opacity:0}
#productBox ul li:hover .img img{-webkit-transform:scale(1.4);transform:scale(1.4)}
#productBox ul li:hover .info h3{top:30px;opacity:0}
#productBox ul li:hover .info .titleBox{opacity:0;letter-spacing:1.2em}
#productBox ul li:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgb(17 17 17 / 60%);opacity:.7;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}
#productBox ul li:after{opacity:.4}
#productBox ul li .info{position:absolute;z-index:1;left:0;top:0;right:0;bottom:0;background:linear-gradient(to bottom,rgb(0 0 0 / 52%) 0%,rgb(0 0 0 / 17%) 63%,rgb(255 255 255 / 0%) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#a6000000',GradientType=0 )}
#productBox ul li .info .price{position:absolute;padding:5px 15px;background:rgb(0 0 0 / .6);top:-39px;left:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#productBox ul li .info .price font{margin:0 10px;display:inline-block;font-weight:300;color:#fff}
#productBox ul li .info .price font.old{color:rgb(255 255 255 / .4)}
#productBox ul li .info .pootitem{margin-bottom:10px;margin:2.2em 1.6em;height:125px;position:relative;top:0;left:0;font-weight:400;font-size:29px;line-height:130%;letter-spacing:.07em;color:#fff;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;font-family:'DM Serif Display',serif;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:horizontal}
#productBox ul li .info .titleBox{writing-mode:tb-rl;-ms-writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;-moz-writing-mode:vertical-rl;-ms-writing-mode:vertical-rl;writing-mode:vertical-rl;z-index:unset;text-align:center;margin:3.2em 3.0em 6.2em;position:absolute;left:0;bottom:0}
#productBox ul li .info .article{font-size:22px;color:#fff;letter-spacing:.3em;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;display:contents}
#productBox ul li .info .article:after{background:#fff;transition:all ease-in-out .3s;content:"";position:absolute;bottom:-120px;left:-82px;transform:rotate(90deg);width:185px;height:1px;display:block;margin:0 10px}
#productBox ul li .info .project-zoom{position:absolute;left:50%;top:50%;width:9em;height:9em;margin:-4.5em;border-radius:50%;border:1px solid rgb(181 181 181 / 52%);overflow:hidden;opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5);-webkit-transition:all .7s;-o-transition:all .7s;transition:all .7s}
#productBox ul li .info .project-zoom:after{content:'';position:absolute;left:50%;top:50%;width:2.625em;height:2.625em;background:url(/images/37/pd-icon.png) 0 0 no-repeat;background-size:cover;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
#productBox ul li:hover .project-zoom{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
#productBox .more{margin-top:10px}
#productBox .more a{position:relative;padding:0px 60px;border:1px rgb(255 255 255 / 0%) solid;background-color:rgb(255 255 255 / 0%);display:inline-block;color:#464646}
#productBox .more font{text-align:center;color:#3e3e3e}
#productBox .more a svg.arrow{position:absolute;width:20px;right:7px;top:calc((100% - 11.41px) / 2)}


/* aboutBox */
#aboutBox{background:none;z-index:5;padding: 2vw 0 0px;}
#aboutBox .text-parallax{background:no-repeat 0 0;display:inline-block;position:relative;left:calc(50% - 240px);top:80px;z-index:2;opacity: 0;}
#aboutBox .sidebar{color:#b4b4b4;font-size:15px;position:absolute;top:210px;left:calc(10% - 0px);align-items:center;font-family:"Poppins",sans-serif;letter-spacing:1.5px;writing-mode:tb-rl;-ms-writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;-moz-writing-mode:vertical-rl;-ms-writing-mode:vertical-rl;writing-mode:vertical-rl;z-index:unset;display:inline-block;animation:opstarJ 7s linear infinite}
#aboutBox .sidebar h1.pageh1{margin-bottom:50px;font-size:18px;font-weight:400;line-height:1.4;letter-spacing:8.5px;display: flex;flex-direction: row;align-items: center;}
#aboutBox .sidebar h1.pageh1::after{content:'';position:absolute;top:-210px;left: 5px;align-items:center;transform:rotate(90deg);transform-origin:top left;width:185px;height:1px;display:block;background:#3e3e3e;margin:0 10px}

@keyframes opstarJ {
    0% {opacity: 0;}
    40% {opacity: 0.9;}
    50% {opacity: 0.9;}
    90% {opacity: 0.9;}
    100% {opacity: 0;}
}

@media (max-width: 1366px) {
    #aboutBox .sidebar {display: none;}
}

#aboutBox .text-parallax-content{width:180px;aspect-ratio:1/1;line-height:1;overflow:hidden;mix-blend-mode:darken;-ms-mix-blend-mode:darken;text-transform:uppercase;left:0;font-weight:700;letter-spacing:1.5px;display:inline-block;position:relative;color:#ffffff;background-image:url(/images/37/ouoologo.png);background-size:cover}
#aboutBox:before{position:absolute;width:30%;height:14%;background:rgb(55 55 55 / 60%);display:block;top:300px;right:430px;z-index:3;content:""}
#aboutBox .bg{width:50%;height:73%;top:13%;right:0%;left:auto;opacity:1;z-index:6;position:absolute;display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;border-radius:60px 0 0 0}
#aboutBox .info{width:47%;color:#fff}
#aboutBox .bg2Txt.stitle span{display:block;position:relative;height:140px;left:1570px;background:#3e3e3e;width:1px}
#aboutBox .info .title1{margin:20px 3vw 0vw 17vw;text-align:left;letter-spacing:2.5px;font-size:18px;color:#c4c4c4;letter-spacing:0.3em}
#aboutBox .info .title{margin:0px 3vw 0vw 17vw;text-align:left;font-family:'DM Serif Display',serif;color:rgb(3 143 173);font-weight:100;font-size:58px}
#aboutBox .info .txtBox{position:relative;padding:1vw 0vw 1vw 17vw}
#aboutBox:after{position:absolute;background-image:url(/images/37/ab-bg.jpg);background-size:56%;background-repeat:no-repeat;background-position:0% 0%;width:100%;height:100%;top:210px;left:calc(35% - -70px);content:"";z-index:0}
#aboutBox .info .txtBox >div{position:relative;z-index:2}
#aboutBox .info .txtBox h3{margin-bottom:20px;font-size:34px;letter-spacing:2.5px;color:#c4c4c4}
#aboutBox .info .txtBox .article{line-height:200%;font-size:15.8px;color:#b9b9b9;margin-bottom:30px;letter-spacing:1.1px}
#aboutBox .info .txtBox .longbar{display:inline-block;width:130px;height:1px;background:#3e3e3e;margin-right:15px}
#aboutBox .info .txtBox b{display:inline-block;width:280px;margin-left:15px;font-size:16px}
#aboutBox .info .txtBox .more{margin:70px 0px 10px;text-align:center;display:flex}
#aboutBox #SeoStarRating font{vertical-align:middle}
#aboutBox #SeoStarRating font:last-child{color:#525252}
#aboutBox #SeoStarRating .fa{vertical-align:initial}


/* secabout */
#secabout >div{position:relative}
#secabout #customBox ul li .article{margin:3vw 0 5vw;text-align:center;line-height:190%;color:#1f1f1f}
#secabout #subBox .left{transform:translateX(-560px);width:calc(100% - 180px);height:100%;top:0;left:0;z-index:3}
#secabout #subBox .right{position:initial;width:76%;z-index:2;margin-left:auto}
#secabout #subBox .right .bgTxt{position:absolute;z-index:1}
#secabout #subBox .right .bgTxt.stitle{-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;font-size:160px;font-family:'DM Serif Display',serif;color:rgb(234 213 186 / 72%);line-height:50%;text-transform:uppercase;font-weight:100;top:-9vw;z-index:3;right:0px}
#secabout #subBox .right .bgTxt.title{width:100%;text-align:left;font-size:140px;color:#edf1f3}
#secabout #subBox .bList .mofd{position:relative;margin:10px}
#secabout #subBox .bList .photo{background-size:cover;background-repeat:no-repeat;background-position:center}
#secabout #subBox .bList .photo img{height:600px}
#secabout #subBox .bList .mofd h3{transition:ease .3s;position:absolute;bottom:0px;left:0px;width:100%;height:60px;text-align:center;line-height:60px;box-sizing:border-box;border-right:1px solid #888}
#secabout #subBox .bList .mofd h3 a{color:#fff;display:block;width:100%}


/*bookBox*/
#bookBox{padding-top:1vw}
#bookBox .topBox{width:min(90%,1440px);margin:0 auto 30px}
#bookBox .topBox .tit.row{display:flex;flex-direction:column;align-items:center}

@media screen and (max-width: 1680px) {
    #aboutBox .info .title{font-size:52px;line-height:100%}
}

@media screen and (max-width: 1470px) {
    #secabout #subBox .right{width:85%}
    #productBox ul li .img img{height:600px}
    #productBox ul li .info{padding:25px 5px 40px;width:calc(100% - 10px)}
    #aboutBox .bg{width:41%;right:0%;height:70%}
    #aboutBox:before{top:240px;right:240px}
    #aboutBox .info{width:52%}
    #aboutBox .info .title1,#aboutBox .info .title{margin:8px 5vw 0vw 17vw}
    #aboutBox .info .txtBox{padding:2vw 0vw 4vw 17vw}
    #aboutBox .text-parallax-content{width:140px}
    #aboutBox .text-parallax{left:calc(50% - 170px)}
    #secabout #subBox .left{transform:translateX(-400px);width:calc(100% - 40px);height:100%;top:0;left:0;z-index:3}
    .bgTxt.stitle{font-size:70px}
    #secabout #subBox .right .bgTxt.stitle{top:-7vw;z-index:3;right:0px;font-size:150px}
    #productBox ul li .info .pootitem{margin:1.0em 1.6em}
}

@media screen and (min-width: 1366px) {
    #aboutBox .info .title1,#aboutBox .info .title{margin:0.5vw 0vw 0vw 14vw;text-transform:uppercase}
    #aboutBox .info .txtBox{padding:1vw 0vw 4vw 14vw}
    #aboutBox .info{width:50%}
}

@media screen and (min-width: 1281px) {
    section .more a:hover{background:#1f1f1f}
    section .more a:hover font{color:#fff}
    section .more a:hover svg{fill:#fff}
    section .more.white a:hover{background:#fff}
    section .more.white a:hover font{color:#1f1f1f}
    section .more.white a:hover svg{fill:#1f1f1f}
    #productBox ul li:hover .img:before{opacity:1}
}

@media screen and (max-width: 1280px) {
    #secabout #subBox .left{transform:translateX(-330px);width:calc(100% - 0px)}
    #aboutBox .text-parallax-content{width: 150px;}
    #newsBox{margin-right:20px}
    #newsBox .text-parallax-content{width:104px}
    #aboutBox:before{right:244px}
    #aboutBox .bgTxt.stitle{font-size:170px}
    #aboutBox .info{width:50%}
    #aboutBox .info .title1,#aboutBox .info .title{margin:8px 5vw 0vw 12vw}
    #aboutBox .info .txtBox{padding:2vw 0vw 4vw 13vw}
    #aboutBox .info .txtBox b{margin-left:0px}
}

@media screen and (max-width: 1140px) {
    #productBox ul li .img img{height:620px}
    #productBox ul li .info .pootitem{margin:12px;font-size:22px}
    #productBox ul li .info .titleBox{margin:0px 12px 60px}
    #productBox ul li .info .article{font-size:20px}
}

@media screen and (max-width: 1024px) {
    section .more a{padding:10px 80px 10px 20px}
    #secabout #subBox .right{width:92%;right:0px;top:0;position:initial}
    #aboutBox .bg{width:100%;height:calc(100% - (12vw + 54px));top:calc(7vw + 54px);z-index:1;position:initial;display:block}
    #aboutBox .info .txtBox{padding:3vw 1vw 5vw 12vw;background:none}
    #aboutBox .info .txtBox h3{text-align:left}
    #aboutBox .info:after,#aboutBox:before{display:none}
    #secabout:before{width:90vw}
    #secabout #customBox{width:70vw}
    #secabout #subBox .left{transform:translateX(0px);width:calc(100% - 0px)}
    #secabout #subBox .bList .photo img{height:360px}
    #aboutBox .info{width:100%}
    #aboutBox .info .txtBox b{width:60%}
    #aboutBox .text-parallax{left:calc(100% - 170px)}
    #aboutBox .info .txtBox .more{text-align:left}
    #aboutBox .bgTxt.stitle{font-size:110px}
    #aboutBox .text-parallax-content{width: 100px;}
}

@media screen and (max-width: 980px) {
    #secabout:before{width:0}
    #secabout #customBox{width:90vw}
    #productBox ul li .info .pootitem{margin:40px;font-size:26px}
    #productBox ul li .info .titleBox{margin:0px 34px 60px}
}

@media screen and (max-width: 768px) {
    #productBox ul li .img img{height:490px}
    #secabout #subBox .bList .photo img{height:240px}
    .newsArea ul li{width:50%}
    .newsArea ul li:before{width:100%;height:1px}
}

@media screen and (max-width: 640px) {
    #productBox ul li .img img{height:540px}
    #newsBox .text-parallax-content{width:84px}
    #newsBox .text-parallax{left:calc(90% - 59px)}
    #newsBox .info{width:calc(100% - 0px)}
    #secabout #subBox .bList .photo img{height:380px}
    .bgTxt.stitle,#aboutBox .info .txtBox .longbar{display:none}
    header #cis{width:240px}
    #aboutBox .info .txtBox b{width:86%}
    .newsArea ul li{width:100%}
    #aboutBox:after,.bg2Txt.stitle{display:none}
    #aboutBox .text-parallax{left: calc(100% - 110px);height: 45px;}
}

@media screen and (max-width: 480px) {
    .bgTxt.stitle{display:none}
    #newsBox{margin-right:10px;margin:-50px auto 0}
    #newsBox .text-parallax-content{font-size:80px}
    #newsBox .info .tit a{font-size:35px;line-height:120%;width:180px}
    footer #footergooglemap #page-form h2{font-size:35px;line-height:120%;margin:0px 0 20px}
    #aboutBox .info .title1,#aboutBox .info .title{margin:8px 5vw 0vw 7vw}
    #aboutBox .info .title{font-size:43px}
    #aboutBox .info .txtBox{padding:2vw 0vw 4vw 7vw}
    #aboutBox{display: flex;flex-direction: column;}
    #aboutBox .bg{order: -1;display: flex;}
    #aboutBox .info{display: flex;flex-direction: column;order: 1;padding-bottom: 60px;}
}

@media screen and (max-width: 375px) {
    #newsBox .text-parallax-content{font-size:60px}
    #newsBox .text-parallax{top:170px;left:calc(90% - 80px)}
    #newsBox .info{width:calc(100% - 30px)}
}