section {position: relative;padding: 5vw 0;}
section >.bg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
section >.info {position: relative;font-size: 0;}
section .h3title {line-height: 1.3;font-weight: 600;font-size: 2.2rem;letter-spacing: 0.16em;color: var(--primary);}
section .emtitle{line-height: 120%;text-align: center;font-size: 50px;color: var(--info);font-family: "Cormorant Garamond", serif;font-style: unset;font-weight: 300;margin-bottom: 10px;display: inline-block;}
section .more a {border-bottom: 1px solid #b4b4b4;font-weight: 600;line-height: 1;display: inline-flex;align-items: center;text-transform: uppercase;padding: 12px 20px;color: var(--complement);font-size: 16px;letter-spacing: 0.01em;border: 1px solid var(--complement);border-radius: 50px;overflow: hidden;position: relative;}
section .more a:hover { background-color: var(--complement); color: #fff; }
section .more a:after { content: ""; position: absolute; width: 0; height: 0; top: 16px; right: 16px; border-style: solid; border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #7c6c57; border-width: 4px 0 4px 5px; transition: all .5s; }
section .more a:before { content: ''; display: block; width: 50px; height: 1px; border-radius: 50px; background: var(--complement); order: 1; margin-left: 20px; }
section .more a:hover:before { background: #ffffff; }
section .more a:hover:after { border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff; }
section .titleBox { display: flex; align-items: flex-start; }
section .titleBox .title { font-size: 2.2rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.16em; color: var(--primary); }
section .titleBox .title,section .titleBox .subTitle { writing-mode: vertical-lr; }
section .titleBox .subTitle { padding-top: 40px; margin-left: 8px; font-size: 22px; letter-spacing: 0.16em; color: var(--triadic1); display: flex; flex-direction: row; align-items: center; font-weight: 500; }
section .titleBox .subTitle span { position: relative; z-index: 0; margin-bottom: 12px; color: #fff; font-size: 18px; }
section .titleBox .subTitle span::after { content: ""; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; z-index: -1; width: 30px; height: 30px; background-color: var(--secondary); border-radius: 50%; }

/* wrap */
#wrap{position:relative;}

/* newsBox */
#newsBox { margin: -85px auto 0; padding: 0; width: 1280px; z-index: 110; }
#newsBox .info { padding: 30px 60px; display: flex; align-items: center; gap: 5px 3%; }
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list { width: 1%; flex: 1 1 auto; }
#newsBox .info .news_list .slick-list { overflow: visible; }
#newsBox .info .news_list li { position: relative; }
#newsBox .info .news_list .news_txt { position: relative; display: flex; align-items: center; gap: .5em 1em; }
#newsBox .info .news_list .news_txt .time { min-width: 6em; }
#newsBox .info .news_list .news_txt .txt { width: 1%; flex: 1 1 auto; }
#newsBox .info .news_list .news_txt a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#newsBox .info .news_list .noBox { position: absolute; width: 2em; text-align: center; top: 50%; right: -6em; -webkit-transform: translateY(-47%); transform: translateY(-47%); }
#newsBox .info .news_btn { position: relative; width: 9em; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
#newsBox .info .news_btn font { width: 5.5em; display: flex; justify-content: flex-end; }
#newsBox .info .news_btn font span { min-width: 2em; text-align: center; }
#newsBox .info .news_btn font span:nth-child(2) { min-width: 1.5em; }
#newsBox .info .news_btn #prevBtn { -webkit-transform: scaleX(-1); transform: scaleX(-1); }


/* aboutBox */
#aboutBox {padding: 10vw 0 4vw;}
#aboutBox:before { position: absolute; width: 755px; height: 726px; display: block; top: 60vh; right: -100px; z-index: 0; content: ""; background: url(/images/37/img-ab-logo.png) no-repeat; }
#aboutBox .bottombg { position: absolute; z-index: -1; top: 66%; left: 50%; transform: translate(-50%,-50%); width: 120%; margin: auto; text-align: center; }
#aboutBox .about_sub {position: absolute;left: 0px;z-index: 0;top: 29%;}
#aboutBox .info { width: min(88%,1240px); margin: 0 auto; display: grid; grid-template-columns: 30% 66%; justify-content: space-between; z-index: 8; align-items: end; }
#aboutBox .info .txtBox { position: relative; }
#aboutBox .info .txtBox >div { position: relative; z-index: 2; }
#aboutBox .info .txtBox .titleBox { margin-bottom: 60px; }
#aboutBox .info .txtBox .h3title,#serveBox .titleBox .text { color: var(--primary); font-weight: 500; font-size: 22px; letter-spacing: 2px; margin-bottom: 10px; }
#aboutBox .info .txtBox .text { margin-bottom: 20px; font-family: "Cormorant Garamond",serif; text-transform: uppercase; color: var(--triadic1); font-weight: 500; font-size: 20px; letter-spacing: 1px; }
#aboutBox .info .txtBox article p { line-height: 230%; font-size: 16px; text-align: justify; font-weight: 300; }
#aboutBox .info .txtBox .more { margin-top: 40px; text-align: left; }
#aboutBox .rightBox { position: relative; }
#aboutBox .rightBox .img { margin-bottom: 40px; position: relative; }
#aboutBox .rightBox:after { content: ''; position: absolute; width: 416px; right: -60px; top: -120px; height: 187px; background: url(/images/37/img-about-txt.png); background-repeat: no-repeat; background-size: cover; z-index: -1; }
#aboutBox .rightBox .img2 { position: absolute; right: -40px; top: 130px; max-width: 350px; margin-bottom: 0; }
#aboutBox .emtitle { display: flex; align-items: center; position: absolute; left: 27vw; z-index: 10; gap: 60px; top: 2vw; margin: 0; opacity: .2; color: #7c6c57; font-size: 6.5vw; text-transform: uppercase; letter-spacing: 10px; }
#serveBox { position: relative; padding: 10vw 0 4vw; }
#serveBox:before { content: ''; position: absolute; z-index: 3; width: 978px; height: 664px; right: 3vw; top: 110px; background: url(/images/37/img-serve-3.png); background-repeat: no-repeat; aspect-ratio: 1/1; animation: aboutImgAnimation 8s ease-in-out infinite; }
@keyframes aboutImgAnimation {
  0% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-60px); transform: translateY(-60px); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
#serveBox .serveinfo { position: relative; }
#serveBox .titleBox {position: absolute;right: 17vw;top: 5vw;display: flex;flex-direction: column;align-items: flex-start;gap: 10px;}
#serveBox .titleBox .title { writing-mode: inherit; }
#serveBox .titleBox .text { font-size: 23px; margin-bottom: 0; opacity: .8; }
#serveBox .titleBox .subTitle {writing-mode: revert;margin-top: 22vh;letter-spacing: 0.06em;font-size: 17px;gap: 20px;text-transform: uppercase;font-weight: 200;}
#serveBox .titleBox .subTitle:after { content: ''; display: inline-flex; width: 130px; height: 1px; background: #a09585; opacity: .6; }
#serveBox .workframe {position: relative;width: 1100px;margin: 0 13% 0 auto;padd;padding: 16vw 0  1vw;}
#serveBox .servetxtBox { position: relative; }
#serveBox .servetxtBox .emtitle {position: relative;font-size: 11.5vw;line-height: .9;opacity: .6;z-index: -10;top: 0;}
#serveBox .servetxtBox .fixTxt2 {left: 0px;background-size: cover;text-align: center;color: transparent;-webkit-text-stroke: 1.5px #bfa492;letter-spacing: 15px;font-weight: lighter;}
#serveBox .servetxtBox .fixTxt3 { left: 20vw; }
#customBox ul { display: grid; align-items: center; grid-template-columns: repeat(2,1fr); gap: 30px; }
#customBox ul li { border-bottom: 1px solid rgb(156 133 105/30%); padding-bottom: 30px; position: relative; }
#customBox ul li:after { content: ''; position: absolute; width: 0; height: 1px; background: var(--triadic1); bottom: 0; }
#customBox ul li:hover:after { width: 100%; }
#customBox ul li .item { display: flex; gap: 22px; position: relative; }
#customBox ul li .item a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#customBox ul li .item .num {width: 30px;height: 26px;background: var(--secondary);color: #fff;display: flex;justify-content: center;align-items: center;border-radius: 50%;margin-top: 6px;}
#customBox ul li .item .Box { position: relative; width: 100%; }
#customBox ul li .item .Box .title { font-size: 1.4rem; color: var(--triadic2); margin-bottom: 10px; }
#customBox ul li .item article { color: var(--triadic2); font-size: 17px; width: min(80%,450px); letter-spacing: 1px; }
#customBox ul li .item .Box:after {width: 10px;height: 10px;border: #7c6c57 solid;border-width: 1px 0 0 1px;display: inline-block;content: "";-webkit-transform: rotate(135deg) translate(-1px, -1px);position: absolute;top: 50%;right: 20px;}
#serveBox .serveparoller { position: absolute; bottom: 13%; left: 70px; }
#serveBox .serveparoller.img2 { left: auto; right: 5%; bottom: auto; top: 10%; }

/* productBox */
#productBox { padding: 0; }
#productBox .workframe {margin: 0 auto;width: min(100%,1505px);}
#productBox:before { content: ''; width: calc(100% + 18vh); position: absolute; left: 0; top: 0; height: 1px; background: rgb(121 85 72/30%); z-index: 5; }
#productBox:after { content: ''; width: calc(100% + 18vh); position: absolute; left: 0; top: 50%; height: 1px; background: rgb(121 85 72/30%); z-index: 5; }
#productBox .info { display: grid; align-items: start; grid-template-columns: 20% 1fr; }
#productBox .info .titleBox {margin-top: 50px;display: flex;justify-content: center;}
#productBox .rightBox ul { display: grid; align-items: center; grid-template-columns: repeat(2,1fr); }
#productBox ul li { position: relative; display: grid; align-items: start; grid-template-columns: 20% 1fr; border-left: 1px solid rgb(121 85 72/30%); }
#productBox ul li .textEditor { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 88%; padding: 30px 0; }
#productBox ul li .textEditor h3 { writing-mode: vertical-lr; font-size: 1.7rem; color: var(--primary); letter-spacing: 7px; font-weight: 600; line-height: 170%; }
#productBox ul li .textEditor .more { position: relative; width: 60px; aspect-ratio: 1/1; border: 1px solid rgb(75 56 31/40%); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; }
#productBox ul li:hover  .textEditor .more { border: 1px solid rgb(209 169 128); background: var(--secondary); }
#productBox ul li .textEditor .more:after { width: 10px; height: 10px; border: #7c6c57 solid; border-width: 1px 0 0 1px; display: inline-block; content: ""; -webkit-transform: rotate(225deg) translate(-1px,-1px); position: absolute; top: 34%; left: 42%; }
#productBox ul li:hover .textEditor .more:after { border: #ffffff solid; border-width: 1px 0 0 1px; }
#productBox ul li a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox ul li >div { overflow: hidden; position: relative; }
#productBox ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgba(31,31,31,.6); display: block; top: 0; left: 0; opacity: 0; z-index: 2; content: ""; }
#productBox ul li .img:after { position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom,rgb(0 0 0/0%) 50%,#000 100%); bottom: 0; left: 0; z-index: 1; content: ""; opacity: .7 }
#productBox ul li .img img { position: relative; width: 100%; aspect-ratio: 4/4.5; object-fit: cover; z-index: 1; }
#productBox ul li .info {overflow: visible;padding: 30px 40px 40px;width: calc(100% - 80px);z-index: 4;position: absolute;bottom: 0;left: 0;display: flex;flex-direction: column;align-items: flex-start;}
#productBox ul li:hover .info { padding: 30px 40px 80px; }
#productBox ul li .info * { color: #fff; }
#productBox ul li .info .text { margin-bottom: 10px; font-size: 1.4rem; letter-spacing: 2px; }
#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 h3 { margin-bottom: 10px; height: 37px; font-weight: 400; font-size: 22px; color: #1f1f1f; }
#productBox ul li .info article {height: auto;font-weight: 400;font-size: 1.2rem;-webkit-line-clamp: 2;font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;color: #dbd8d8;}


@media screen and (max-width:1780px) {
    #aboutBox .info{display:grid;align-items:center}
	#aboutBox .info .img img{}
	#aboutBox .emtitle{top:8vw;font-size: 80px;}
}
@media screen and (max-width:1680px) {
    #aboutBox .emtitle{top: 8vw;}
    #aboutBox .emtitle:before{height:2px;}
    #aboutBox .info .txtBox{margin-top: 150px;}
	#serveBox .titleBox { right: 2vw; top: 2vw; }
}
@media screen and (max-width:1440px) {
    #aboutBox .info .txtBox article p{}
    #aboutBox .about_sub{width: 410px;}
	#serveBox .workframe { margin: 0 auto; }
	#serveBox .serveparoller,#serveBox .serveparoller.img2 { display: none; }
#aboutBox .rightBox:after{display: none;}
}
@media screen and (max-width:1280px) {
    #aboutBox .info .txtBox{margin-top: 50px;margin-bottom: 50px;margin-left: 0;}
    #aboutBox{padding-top: 3vw;}
    #aboutBox .info, #customBox ul, #productBox .rightBox ul{grid-template-columns:1fr}
    #aboutBox .bottombg{display:none;}

#aboutBox .emtitle,#serveBox:before,#aboutBox .about_sub{
    display: none;
}
    #serveBox .titleBox{
    position: relative;
    right: 0;
    top: 0;
    margin: auto;
    width: 90%;
}
    #serveBox .titleBox .subTitle{
    margin-top: 1vh;
    padding-top: 0;
    margin-left: 0;
    font-size: 12px;
}
    section .titleBox .title{
    font-size: 1.8rem;
}
    #aboutBox .info .txtBox .h3title, #serveBox .titleBox .text{
    font-size: 1.3rem;
}
    #serveBox .workframe{
    padding: 10vw 0 1vw;
    width: 90%;
}
    #customBox ul li .item .Box .title{
    font-size: 1.2rem;
}
    #serveBox{
    padding: 10vw 0 4vw;
}
}
@media screen and (max-width:1024px) {
    #aboutBox:before{right: unset;display: none;}
    #wrap:before, #wrap:after, #aboutBox:after, #aboutBox .emtitle:before, #aboutBox .bg:after{display:none;}
	#aboutBox .bg { width: 100%; height: calc(100% - (12vw + 54px)); top: calc(7vw + 54px); z-index: 1; }
	section .titleBox{
    display: flex;
    flex-direction: column;
    align-items: center;
}
    section .titleBox .title, section .titleBox .subTitle {margin-left: 0;writing-mode: initial;}
	section .titleBox .subTitle{
    padding-top: 10px;
}
    section .titleBox .subTitle span{
    margin-bottom: 0;
    margin-right: 12px;
}
    #secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
    #aboutBox .rightBox .img2{max-width: 280px;right: -40px;top: 60px;}
#productBox .info{
    display: flex;
    flex-direction: column;
    align-items: center;
}
    
    #productBox .info .titleBox{
    margin-top: 40px;
    margin-bottom: 50px;
}
     #productBox .rightBox{
    width: 100%;
}
    #productBox:after{
    display: none;
}
    #productBox ul li{
    border-bottom: 1px solid rgb(121 85 72 / 30%);
}
       #productBox ul li .info .text{
    font-size: 1.2rem;
}
    #productBox ul li .info article{
    font-size: 1rem;
}
    #productBox ul li .textEditor h3{
    font-size: 1.4rem;
}
    #productBox ul li .textEditor{
    padding: 20px 0;
    height: 85%;
}
    #productBox ul li .textEditor .more{
    width: 42px;
}
    #productBox ul li .textEditor .more:after{
    top: 25%;
    left: 37%;
}
}
@media screen and (max-width:640px) {
    #aboutBox{padding-bottom: 12vw;}
    #aboutBox:before{width: 100%;right: unset;left: 0;height: calc(90% - 50px);}
    #aboutBox .about_sub{display:none;}
    #aboutBox .info .txtBox article p{width: 100%;}
    section .title{font-size: 20px;letter-spacing: 1px;}
    #aboutBox .info{width:90%}
    #aboutBox .info .txtBox {}
    section .emtitle, #aboutBox .emtitle{font-size: 40px;top: 9vw;}
	#productBox ul li .info {margin: -55px auto 0;padding: 25px 30px 40px;width: calc(85% - 0px);}
#aboutBox .rightBox .img2{
    max-width: 150px;
    right: 0px;
    top: 110px;
}
        section .titleBox .title{
    font-size: 1.5rem;
}
    #aboutBox .info .txtBox .h3title, #serveBox .titleBox .text{
    font-size: 1.1rem;
}
 
}