/* indexbox */
section{padding:5vw 0}
section .title_box{margin-bottom:40px}
section .title_box font{font-family: "Anybody", serif;font-weight: 600;font-size: 40px;line-height: 1.2;color: var(--primary);}
section .title_box font:before{content:'';display: block;width: 13px;border: 1px solid var(--secondary);aspect-ratio: 1/1;border-radius: 50px;margin-left: -15px;}
section .title_box font:after{content:'';display: block;width: 23px;background: var(--primary);height: 1px;margin-top: 11px;margin-bottom: 10px;}
section .title_box h2{font-weight:500;letter-spacing: 1px;font-size: 26px;}
.indexbox { position: relative; }
.indexbox h3.boxtit { font-size: 30px; color: #ad9d8f; }
.more_btn{margin-top:0px}
.more_btn a{position:relative;overflow:hidden;width:130px;padding:10px 30px;display:flex;align-items:center;justify-content:space-between}
.more_btn font{text-align:left;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:#ffffff}
.more_btn.white font{letter-spacing:1px;font-size:15px;position:relative;-webkit-writing-mode:inherit;-ms-writing-mode:inherit;writing-mode:inherit;color:#fff;font-weight:400}
.more_btn.white a:before{content:"";height:100%;width:0;display:block;position:absolute;bottom:0;left:0px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color:#52535c}
.more_btn.white a::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;background-color: var(--triadic1);z-index:-1;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
.more_btn.white .arrow{position:relative;display:inline-block;vertical-align:middle;width:9px;height:9px;margin-right:-5px}
.more_btn.white .arrow:after,.more_btn.white .arrow:before{content:"";position:absolute;top: 51%;left:0;z-index:1;width:100%;height:1px;margin-top:-0.5px;background-color:#ffffff}
.more_btn.white .arrow:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.more_btn.white:hover .arrow:after{-webkit-transform:rotate(270deg);transform:rotate(270deg)}

/* product_area */
#product_area .title_box p{margin-bottom: 20px;}
#product_area .title_box h2{ word-spacing: 100vw;}
#product_area .title_box article{margin-top:30px;font-size: 14px;line-height: 2.4;}
#product_area{position:relative;background-image: url(/images/36/serviceBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#product_area .allwrap{position:absolute;right:0;bottom:0;letter-spacing:12px;width:100%}
#product_area .allwrap #canvas-container{position:absolute;bottom: 500px;}
#product_area .workframe{width: min(90%, 1300px);display: grid;grid-template-columns: 30% 60%;justify-content: space-between;margin-top: 100px;}
#product_area .workframe:before{content:url(/images/36/pageDeck01.png);position: absolute;top: -100px;left: -100px;}
#product_area .applicationList{display: grid;width:100%;grid-template-columns: repeat(2, 1fr);gap: 30px;}
#product_area .applicationMList{border:1px solid rgba(220,220,220,0.25)}
#product_area .applicationItem{padding:0;margin:0;display: block;}
#product_area .applicationItem:nth-child(3){order:2}
#product_area .applicationItem.title .item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:50px 25px 54px 25px}
#product_area .applicationItem.title .item .more_btn{position:relative;margin:5px}
#product_area .more_btn.white a::after{}
#product_area .more_btn.white a:hover font{color:#ffffff}
#product_area .more_btn.white font{}
#product_area .applicationItem .item:hover .Img{-webkit-filter:initial;filter:initial;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}
#product_area .item{position:relative;}
#product_area .item .atag_item{z-index: 2;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#product_area .Img{position:absolute;z-index:3;display: flex;align-items: center;justify-content: center;right: 0;}
#product_area .Img::after{background:rgb(198 208 227 / 60%);content:"";display:block;width: 60px;aspect-ratio: 1/1;position:absolute;border-radius:50%;z-index:-1}
#product_area .applicationItem:not(.title) .item:hover .Img::before{-webkit-animation:masterBtnHover 2s linear infinite;animation:masterBtnHover 2s linear infinite}
@-webkit-keyframes masterBtnHover{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
20%{opacity:0.5;-webkit-transform:scale(1.4);transform:scale(1.4)}
40%{opacity:0.25;-webkit-transform:scale(1.8);transform:scale(1.8)}
60%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
100%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
}@keyframes masterBtnHover{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
20%{opacity:0.5;-webkit-transform:scale(1.4);transform:scale(1.4)}
40%{opacity:0.25;-webkit-transform:scale(1.8);transform:scale(1.8)}
60%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
100%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
}
#product_area .Txt{position:relative;z-index:2;}
#product_area .Txt .num{color: var(--white);font-size: 15px;line-height:140%;font-family: "Open Sans", serif;font-weight: 600;background: var(--primary);display: inline-flex;width: 55px;aspect-ratio: 1/1;align-items: center;justify-content: center;border-radius: 50px;}
#product_area .Txt .num img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);width: 35px;aspect-ratio: 1/1;}
#product_area .Txt .title{display: inline-block;color: var(--primary);font-size: 20px;font-weight: 500;margin-left: 15px;letter-spacing: 1px;}
#product_area .subtitle{color:#fff;font-size:15px;font-weight:400;letter-spacing:1px;padding-top: 15px;padding-right:0px;position: relative;z-index: 5;}
#product_area .Txt .text{height:85.5px;color:#e9eef5;font-size:15px;line-height:1.9;letter-spacing:0.7px;margin-top:17px}
#product_area .classLink{display: grid;grid-template-columns: repeat(2, 1fr);}
#product_area .classLink li{line-height:120%}
#product_area .classLink li a{font-size:14px;display: flex;align-items: center;position: relative;}
#product_area .classLink li:hover a{color:var(--primary)}
#product_area .classLink li a:before{content:'-';margin-right: 6px;}
#product_area .text{font-size:14px}
#product_area .moreBtn{padding-top:23px}
#product_area .moreBtn a{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;width:98px;color:#fff;font-weight:700;letter-spacing:0.01em;z-index:1}
#product_area .moreBtn a::after{content:"";position:absolute;top:calc(50% - 7.5px);right:-10px;width:20px;height:17px;background:url("/images/39/arrow_right_white.png") no-repeat center/cover;z-index:1;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}

/* contactBox */
#contactBox{padding-top:2vw}
#contactBox .workframe{width: min(90%, 1300px);}
#contactBox .info{display:grid;grid-template-columns: 1fr 245px;align-items: center;}
#contactBox .title p{font-weight:500;letter-spacing: 1px;font-size: 26px;}
#contactBox .title h2{font-weight: 400;letter-spacing: 1px;font-size: 15px;margin-top: 15px;}
#contactBox .more{}
#contactBox .more a{justify-content: center;color: #fff;font-weight: 300;font-size: 16px;display: inline-flex;align-items: center;letter-spacing: 1px;background: var(--triadic1);padding: 10px 30px;}
#contactBox .more a svg{fill:#fff;margin-right: 8px;}

/* news_area */
#news_area{background: var(--complement);position: relative;}
#news_area:before{content:'';position: absolute;width: 50vw;height: 100%;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;top: 0;left: 0;background-image: url(/images/36/newsBg.jpg);opacity: .15;}
#news_area:after{content:'';position: absolute;width: 80%;height: 100%;top: 0;left: 0;background: linear-gradient(90deg, rgb(255 244 227 / 0%), var(--complement));}
#news_area .bg{position:absolute;right: 0;top: 0;height: 100%;width: 23vw;background-size: cover;background-position: 50% 50%;z-index: 2;}
#news_area .item{position:relative;}
#news_area .item .more_btn{position:absolute;right: 0;bottom: 10px;}
#news_area .workframe{width: min(90%, 1040px);margin-left: 18%;z-index: 5;}
#news_area .tt_box h2{text-align:left;}
#news_area .sub_title{display:flex;flex-direction: row;align-items: center;}
#news_area .sub_title:before, #product_area .sub_title:before{box-shadow: 20px 0px var(--secondary);background: var(--primary);margin: 0 35px 0 0;}
#news_area .tt_box{position:relative;}
#news_area .tt_box a{position:absolute;right: 0;bottom: 0;}
#news_list li {background: #fff;margin: 5px 0;}
#news_list li .item_row{padding: 40px 30px;position: relative;}
#news_list li .item_row a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#news_list .info_box {display: grid;grid-template-columns: 100px 1fr;align-items: center;justify-content: space-between;gap: 30px;}
#news_list .info_box a{background: var(--info);display: inline-block;padding: 9px 0;height: auto;font-weight: 300;}
#news_list li:hover .info_box a{background:#ececed;color: var(--info);}
#news_list .info_box .time {font-size: 14px;color: #a4a4a4;font-family: "Lato", serif;}
#news_list .info_box h3 {margin: .2em 0 .5em;font-weight: 500;font-size: 18px;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#news_list li:hover .info_box h3{color:var(--primary)}
#news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; }

/* about_area */
#about_area {z-index: 5;position: relative;}
#about_area::before, about_area::after{content:"UHO ACCOUNTANT FIRM";position:absolute;bottom: 95px;z-index:2;padding:0 60px;display:block;font-size:125px;letter-spacing:8px;line-height:1;text-align:center;white-space:nowrap;color: var(--complement);pointer-events:none;-webkit-animation:scroll 100s linear infinite;animation: scroll 100s linear infinite;font-family: "Anybody",'Noto Sans TC', 'Noto Sans SC', sans-serif;}
#about_area::after{-webkit-animation-delay:-50s;animation-delay:-50s}
@keyframes scroll{from{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}
#about_area .workframe{display:flex;flex-direction: column;align-items: center;margin: 9vw auto;z-index: 5;}
#about_area .entitle {margin-top: 10px;font-size: 22px;margin-bottom: 30px;font-style: unset;display: block;text-align: center;color: var(--secondary);font-family: "Lato", serif;font-weight: 400;}
#about_area .title {padding-bottom: 0;word-spacing: 100vw;line-height: 1.6;text-align: center;font-weight: 500;letter-spacing: 1px;font-size: 28px;}
#about_area .title:first-letter{color:var(--black)}
#about_info{display:flex;flex-direction: column;align-items: center;}
#about_area article p {margin-bottom: 60px;line-height: 210%;letter-spacing: 2px;font-weight: 400;text-align: center;}
#about_area .about_sub_1 {width: 260px;top: -3vw;left: 49vw;position: absolute;z-index: -1;animation: aboutImgAnimation 10s ease-in-out infinite;}
#about_area .about_sub_1 .clip img{aspect-ratio: 2.9/3;object-fit: cover;}
#about_area .about_sub_2 img{aspect-ratio: 2.5/3;object-fit: cover;}
#about_area .about_sub_2 {width: 390px;top: 10vw;right: 6vw;position: absolute;}
#about_area .about_sub_3 {width: 330px;bottom: 2vw;right: 28vw;position: absolute;z-index: 2;}
#about_area #about_img{position: absolute;left: 0;width: 27vw;bottom: 0;animation: aboutImgAnimation 10s ease-in-out infinite;}
#about_area #about_img img{aspect-ratio:3/4;object-fit: cover;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}


/* SeoStarRating */
#SeoStarRating { text-align: right; }

/* productBox */
#productBox { padding: 5vw; z-index: 2; }
#productBox:before { position: absolute; width: 85vw; height: 230px; background: #0f2942; display: block; top: 0; left: 0; z-index: 2; content: ""; }
#productBox:after { position: absolute; width: 50%; height: 100%; background: #efebe9; display: block; top: 0; right: 0; z-index: 1; content: ""; }
#productBox .bg { position: absolute; width: 30vw; height: 17vw; background: no-repeat 50% / cover; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); top: -7vw; right: 10vw; z-index: 4; }
#productBox .productinfo { position: relative; z-index: 3; }
#productBox .productinfo ul { margin-top: 3vw; }
#productBox .productinfo ul li { position: relative; }
#productBox .productinfo ul li a { position: absolute; width: 100%; height: 100%; z-index: 2; }
#productBox .productinfo ul li .info { padding: 40px; }
#productBox .productinfo ul li .img { margin-bottom: 30px; background: no-repeat 50% / cover; }
#productBox .productinfo ul li.slick-active .img { box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); }
#productBox .productinfo ul li .price font { margin-right: 10px; display: inline-block; font-size: 15px; }
#productBox .productinfo ul li .price font.old { color: #a3a3a3; }
#productBox .productinfo ul li h3 { margin-bottom: 20px; height: 34px; font-size: 20px; -webkit-line-clamp: 1; }
#productBox .productinfo ul li article { height: 81px; font-weight: 400; color: #393939; -webkit-line-clamp: 3; }

/* bookBox */
#bookBox { background: #efebe9; }
#bookBox:before , #customBox:before { position: absolute; width: 50%; height: 100%; background: #dcd7d2; top: 0; left: 0; z-index: 1; content: ""; }
#bookBox .bg { position: absolute; width: 42%; height: calc(100% - 50px); left: 50%; bottom: 0; z-index: 2; background: #fff; }
#bookBox .bg >div { height: 100%; background: no-repeat 50% / cover; opacity: .2; }
#bookBox .bookinfo { position: relative; top: -50px; z-index: 3; }
#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { position: absolute; margin-left: calc(5% + 50px); width: 22%; text-align: left; font-size: 0; bottom: 50px; left: 62%; }
#bookBox .bookinfo .boxtit { font-size: 30px; bottom: calc(100% - 200px); }
#bookBox .bookinfo .list { position: relative; }
#bookBox .bookinfo ul li { font-size: 0; }
#bookBox .bookinfo ul li .img { margin: 50px 50px 50px 0; width: 62%; display: inline-block; box-shadow: 0 0 50px 2px rgba(0, 0, 0, .3); }
#bookBox .bookinfo ul li .info { margin-left: 5%; width: 22%; display: inline-block; }
#bookBox .bookinfo ul li .info a { width: 90%; height: 170px; font-size: 20px; color: #292929; -webkit-line-clamp: 5; }
#bookBox .bookinfo .btns { margin: auto; width: 135px; right: 8%; left: auto; }
#bookBox .bookinfo .slick-dots li { margin: 0; }
#bookBox .bookinfo .slick-dots li button:before , #bookBox .bookinfo .slick-dots li.slick-active button:before { color: #0f2942; }
#bookBox .bookinfo .more { width: 90%; text-align: right; }

/* customBox */
#customBox ul { padding: 50px 0; z-index: 2; }
#customBox ul li { position: relative; }
#customBox ul li .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; z-index: 1; }
#customBox ul li .bg iframe { width: 100%; height: 100%; }
#customBox ul li .info { position: relative; padding: 70px 0; min-height: 215px; background: rgb(15 41 66 / .8); z-index: 2; }
#customBox ul li .info h3 { text-align: center; font-size: 35px; }
#customBox ul li .info article { margin: 30px auto 0; width: 700px; line-height: 200%; text-align: center; font-weight: 400; color: #ccc; }

@media screen and (min-width:1281px) {
	.indexbox .more a:hover { color: #fff; }
	.indexbox .more a:hover:before { width: 100%; }
}
@media screen and (max-width:1440px) {
    #news_area .item .more_btn{right: 20vw;}
    #product_area .allwrap #canvas-container{bottom: 400px;}
    #news_area .workframe{margin-left:10%}
    #about_area .about_sub_2{right: -4vw;}
    #about_area .about_sub_1 .clip img{aspect-ratio:4/3}
    #about_area::before, about_area::after{bottom: 15px;}
}
@media screen and (max-width:1280px) {
    #news_area .workframe{margin:0 auto;}
	#productBox .productinfo ul li.slick-active .img { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); }
	#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { margin-left: 50px; }
	#bookBox .bookinfo ul li .info { margin-left: 0; }
}
@media screen and (max-width:1024px) {
    #about_area .about_sub_3{right: 2vw;}
    #about_area #about_img{left: -5vw;}
    #about_area .about_sub_1{left:unset;right: 8vw;}
    #about_area .about_sub_2{display:none;}
    #product_area .workframe{grid-template-columns:1fr}
    #product_area .more_btn{position:absolute;right: 0;bottom: 60px;}
	#productBox:before { width: 95vw; }
	#productBox { padding: 5vw 5vw calc(5vw + 80px); }
	#bookBox .bookinfo .boxtit { margin-left: 0; width: 100%; text-align: center; top: -40px; bottom: auto; left: 0; }
	#bookBox .bookinfo ul li .img { margin: 30px 30px 30px 0; width: calc(92% - 135px); box-shadow: 0 0 20px 2px rgba(0, 0, 0, .3); }
	#bookBox .bookinfo ul li .info { position: absolute; width: calc(92% - 135px); background: #0f2942; display: block; left: 0; bottom: 30px; z-index: 2; }
	#bookBox .bookinfo ul li .info a { margin: 10px 20px 4px; height: 34px; color: #fff; -webkit-line-clamp: 1; }
	#bookBox .bookinfo .slick-dots { margin-left: 0; width: 100%; text-align: center; left: 0; bottom: -10px; }
}
@media screen and (max-width:980px) {
    #about_area #about_img{left: -10vw;}
    #about_area .about_sub_1{left:unset;right: -10vw;}
    #news_area .item .more_btn{right: 0;}
    #news_area .bg{display:none;}
    #contactBox .info{display:flex;flex-direction: column;align-items: center;gap: 30px;}
    #contactBox .info *{text-align:center;}
    #product_area .allwrap #canvas-container{bottom: 540px;}
	#aboutBox { padding-top: 0; }
	#aboutBox .fixTxt { display: none; }
	#aboutBox #pictureBox { top: -7vw; }
	#aboutBox #pictureBox , #aboutBox #pictureBox a.photo { width: 40vw; height: 25vw; }
	#aboutBox .aboutinfo { padding: 5vw 0; }
	#aboutBox .aboutinfo .row.info { position: relative; padding: 3vw 10vw; width: 80%; z-index: 2; }
	#aboutBox .aboutinfo .row.info h3.boxtit { color: #25496b; }
	#aboutBox .aboutinfo .row.info .more a { border-color: #25496b; color: #25496b; }
	#aboutBox .aboutinfo .row.img { width: 100%; display: block; opacity: .4; top: 0; left: 0; z-index: 1; }
	#productBox .bg { display: none; }
	#customBox ul li .info article { width: 85%; }
}
@media screen and (max-width:640px) {
    #product_area .applicationItem:nth-child(3){order:unset}
    #about_area .about_sub_1{width: 90%;}
    #about_area article p{letter-spacing:0}
    #about_area::before, about_area::after{font-size: 65px;bottom: 40px;animation: scroll 70s linear infinite;}
    #about_area #about_img{display: none;}
    #about_area .about_sub_3{width:200px;}
    #about_area .about_sub_1 .clip img{aspect-ratio: 5/3;}
    #about_area .workframe{margin: 45vw auto 20vw;}
    #about_area .title{font-size:22px}
    #news_list .info_box h3{font-size: 17px;}
    #news_list .info_box{grid-template-columns: 90px 1fr;gap: 10px;}
    #news_list li .item_row{padding: 20px 15px;}
    #news_area .item .more_btn{display:none;}
    #contactBox .title p{font-size:24px}
    #product_area .allwrap #canvas-container{bottom: 410px;}
    section{padding:12vw 0}
    #contactBox{padding: 16vw 0 11vw;}
    #product_area .applicationList{grid-template-columns:1fr}
    #product_area .more_btn{position: relative;right: 0;bottom: 0;margin-bottom: 50px;}
	#NewsBox { position: relative; width: 90%; }
	#productBox .productinfo ul { margin: auto; width: 80%; }
	#bookBox .bookinfo ul li .img { margin: 30px; width: calc(100% - 60px); }
	#bookBox .bookinfo ul li .info { width: calc(100% - 60px); left: 30px; }
	#bookBox .bookinfo .btns { display: none; }
}