/* #product_area */
#product_area .list_box ul li {transform:translate(0,0);-webkit-transform:translate(0,0)}

/* #book_area */
#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}

/* #youtube_box */
#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 .menu {border-bottom:1px rgba(var(--white-rgb),.2) solid}

/* #openform */
#openform {background:rgba(var(--white-rgb),.3)}
section {margin:0 auto}
section.section_pad {padding:5vw 0}
section>* {z-index:3}
section .title_box {margin-bottom:40px}
section .title_box .area_title {font-weight:400;font-size:45px}
section .title_box .sub_title {font-weight:300;font-size:23px}
.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 .info_box article {margin-bottom:30px;width:90%;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 {position:relative;overflow:hidden;padding-top:180px}
#custom_area .shapeJbox {position:absolute;top:0}
#custom_area:before {content:"DAILY LIFE";position:absolute;left:-45px;bottom:45px;font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:150px;line-height:1;font-weight:600;letter-spacing:.1em;color:rgba(35,67,58,.022);pointer-events:none}
#custom_area::after {content:"";position:absolute;right:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,#af665a00,#1a3d36,#af665a00);z-index:3}
#custom_area .cu_bg {position:absolute;z-index:2;height:100%;width:100%;top:0}
#custom_area .cu_bg:before {content:"";position:absolute;background:linear-gradient(180deg,#fffbf4,rgb(255 255 255 / 49%),rgb(250 247 240 / 83%));width:100%;height:100%}
#custom_area .cu_bg img {width:100%;height:100%;object-fit:cover}
#custom_area .workframe {position:relative;z-index:2}
#custom_area .twoo_titbox {display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:end;margin-bottom:58px}
#custom_area .twoo_left {min-width:0}
#custom_area .twoo_right {display:flex;justify-content:flex-end;padding-bottom:5px}
#custom_area .twoo_right .sec_desc {max-width:470px;margin-top:0}
#custom_area .twoo_right .sec_desc .pageh1 {position:relative;font-size:16px;font-weight:400}
#custom_area #custom_box {position:relative}
#custom_area #custom_box>ul {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:0;padding:0;list-style:none}
#custom_area #custom_box>ul>li {min-width:0}
#custom_area .cuu_item {display:flex;flex-direction:column;height:100%;overflow:hidden;border:2px solid rgb(128 95 59 / 36%);border-radius:24px;background:#fffaf3;background:linear-gradient(90deg,#fffaf3,#f7f2ea,#fbf9f5)}
#custom_area .cuu_info {position:relative;flex:1;padding:31px 30px 28px;text-align:center}
#custom_area .numberJJ {display:flex;align-items:center;justify-content:center;width:45px;height:45px;margin:0 auto 17px;border:1px solid rgba(164,122,76,.42);border-radius:50%;font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:13px;line-height:1;color:#a47a4c}
#custom_area .h2 {margin:0;font-size:28px;line-height:1.5;font-weight:700;letter-spacing:.08em;color:#315047;text-align:center}
#custom_area .article {max-width:330px;margin:12px auto 0;font-size:17px;line-height:1.85;letter-spacing:.02em;color:#7a817d;text-align:center}
#custom_area .article p {margin:0}
#custom_area .article p+p {margin-top:8px}
#custom_area .cumboimg {position:relative;width:100%;aspect-ratio:4/2.65;overflow:hidden;background:#e8e1d5}
#custom_area .cumboimg:after {content:"";position:absolute;inset:0;border-top:1px solid rgba(164,122,76,.1);pointer-events:none}
#custom_area .cumboimg img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s ease}
#custom_area .cuu_item:hover .cumboimg img {transform:scale(1.035)}
#custom_area .cuu_item:hover .numberJJ {background:#23433a;border-color:#23433a;color:#fff}
#custom_area .numberJJ {transition:background .3s ease,border-color .3s ease,color .3s ease}

/* #phoevn_area */
#phoevn_area {position:relative;overflow:hidden;background:#faf7f0;padding-bottom:150px}
#phoevn_area:before {content:"ENVIRONMENT";right:47vw;top:60px;font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:70px;line-height:1;font-weight:600;letter-spacing:.08em;color:rgba(35,67,58,.023);pointer-events:none;position:absolute;width:auto;height:100%;webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}
#phoevn_area .workframe {z-index:2}
#phoevn_area .phoevn_grid {display:grid;grid-template-columns:50% 43%;gap:7%;align-items:center}
#phoevn_area .pho_ltftbox {position:relative;padding:20px 0;min-width:0}
#phoevn_area .pho_ltftbox .sec_desc {max-width:480px}
#phoevn_area .pho_rightbox {position:relative;min-width:0}
#phoevn_area .pho_main {position:relative;width:100%}
#phoevn_area:after {content:"";position:absolute;right:0;bottom:0;width:100%;height:1px;background:linear-gradient(270deg,rgb(178 180 156 / 33%),rgb(26 61 54 / 57%),rgb(34 75 64 / 25%))}
#phoevn_area .phoevn_area_bg {position:absolute;width:100%;height:100%;top:0;z-index:0}
#phoevn_area .phoevn_area_bg::before {content:"";position:absolute;top:0;right:0vw;width:27vw;aspect-ratio:562/433;background:url("/images/40/puyuan-bg-top-house.png") center/contain no-repeat;opacity:.1;pointer-events:none;z-index:0;transform-origin:right bottom;animation:sway2 5s linear infinite}
#phoevn_area .phoevn_area_bg::after {content:"";position:absolute;left:0;bottom:0;width:100%;aspect-ratio:320/63;background:url("/images/40/puyuan-bg-bottom.png") center bottom/100% auto no-repeat;opacity:.3;pointer-events:none;z-index:0}
#phoevn_area .phoevn_area_bg>* {position:relative;z-index:1}
@keyframes sway2{0%{transform:translateY(0px) rotate(2deg)}50%{transform:translateY(10px) rotate(-2deg)}100%{transform:translateY(0px) rotate(2deg)}}
#phoevn_area .pho_main_item {width:100%;height:100%}
#phoevn_area .pho_main_item>a {display:block;width:100%;height:100%}
#phoevn_area .pho_main_item img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s ease}
#phoevn_area .pho_main_item:hover img {transform:scale(1.025)}
#phoevn_area .pho_main_item>a:after {content:"";position:absolute;z-index:2;inset:0;border:1px solid rgba(255,255,255,.22);border-radius:34px;pointer-events:none}
#phoevn_area .pho_slider .pho_item.active .img_scale {outline:1px solid rgba(164,122,76,.75);outline-offset:-1px}
#phoevn_area .pho_slider .pho_item.active .img_scale:before {content:"";position:absolute;z-index:4;left:12px;top:12px;width:7px;height:7px;border-radius:50%;background:#d0aa79;pointer-events:none}
#phoevn_area .pho_main_inner {position:relative;width:100%;aspect-ratio:1.62/1;overflow:hidden;border-radius:34px;background:#e8e3da}
#phoevn_area .pho_main_inner .pho_item {width:100%;height:100%}
#phoevn_area .pho_main_inner .img_scale {width:100%;height:100%}
#phoevn_area .pho_main_inner a {display:block;width:100%;height:100%}
#phoevn_area .pho_main_inner img {display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#phoevn_area .pho_main_inner .pho_name {display:none}
#phoevn_area .pho_count {position:absolute;z-index:3;right:22px;bottom:20px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:100px;background:rgba(24,53,45,.78);font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:11px;line-height:1;color:#fff;backdrop-filter:blur(5px)}
#phoevn_area .pho_count .total {color:#c8c8c8}
#phoevn_area .pho_count i {display:block;width:22px;height:1px;background:rgba(255,255,255,.5)}
#phoevn_area .pho_count .current {color:#e1c39e}
#phoevn_area .pho_slider {margin:20px -8px 0}
#phoevn_area .pho_slider .slick-list {overflow:hidden}
#phoevn_area .pho_slider .slick-track {display:flex}
#phoevn_area .pho_slider .slick-slide {height:auto;padding:0 8px}
#phoevn_area .pho_slider .slick-slide>div {height:100%}
#phoevn_area .pho_slider .pho_item {height:100%}
#phoevn_area .pho_slider .img_scale {position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:#e8e1d5}
#phoevn_area .pho_slider .img_scale a {display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center}
#phoevn_area .pho_slider .img_scale img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s ease}
#phoevn_area .pho_slider .img_scale:after {content:"";position:absolute;z-index:2;inset:0;border:1px solid rgba(255,255,255,.2);border-radius:inherit;pointer-events:none}
#phoevn_area .pho_slider .pho_name {position:absolute;z-index:3;left:15px;right:15px;bottom:13px;overflow:hidden;font-size:12px;line-height:1.5;letter-spacing:.04em;color:#fff;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease}
#phoevn_area .pho_slider .img_scale a:after {content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(17,48,39,.48));opacity:0;transition:opacity .3s ease}
#phoevn_area .pho_slider .img_scale:hover img {transform:scale(1.045)}
#phoevn_area .pho_slider .img_scale:hover .pho_name {opacity:1;transform:translateY(0)}
#phoevn_area .pho_slider .img_scale:hover a:after {opacity:1}
#phoevn_area .pho_slider .slick-current .img_scale {outline:1px solid rgba(164,122,76,.62);outline-offset:-1px}
#phoevn_area .pho_control {display:flex;align-items:center;justify-content:flex-end;gap:13px;margin-top:17px}
#phoevn_area .pho_control button {position:relative;width:35px;height:35px;padding:0;border:1px solid rgba(35,67,58,.22);border-radius:50%;background:transparent;cursor:pointer;transition:background .3s ease,border-color .3s ease}
#phoevn_area .pho_control button span {position:absolute;left:11px;top:16px;width:11px;height:1px;background:#23433a}
#phoevn_area .pho_control button span:after {content:"";position:absolute;top:-3px;width:6px;height:6px;border-top:1px solid #23433a;border-right:1px solid #23433a}
#phoevn_area .pho_prev span:after {left:0;transform:rotate(-135deg)}
#phoevn_area .pho_next span:after {right:0;transform:rotate(45deg)}
#phoevn_area .pho_control button:hover {background:#23433a;border-color:#23433a}
#phoevn_area .pho_control button:hover span {background:#fff}
#phoevn_area .pho_control button:hover span:after {border-color:#fff}
#phoevn_area .pho_line {position:relative;width:52px;height:1px;background:rgba(35,67,58,.16);overflow:hidden}
#phoevn_area .pho_line span {position:absolute;left:0;top:0;width:33.333%;height:100%;background:#a47a4c;transition:width .4s ease,transform .4s ease}
@-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}}

/* @media */
@media screen and (max-width:1200px) {
  #custom_area .twoo_titbox { grid-template-columns: 1fr .8fr; gap: 5vw; margin-bottom: 48px }
  #custom_area #custom_box>ul { gap: 20px }
  #custom_area .cuu_info { padding: 28px 24px 25px }
  #custom_area .h2 { font-size: 21px }
  #custom_area .article { font-size: 13px }
  #phoevn_area .phoevn_area_bg::before { width: 42vw; right: -4% }
  #phoevn_area .phoevn_area_bg::after { width: 120%; left: -10% }
  #phoevn_area .phoevn_grid { grid-template-columns: .72fr 1.28fr; gap: 4.5vw }
  #phoevn_area .pho_main_inner { aspect-ratio: 1.5/1 }
  #phoevn_area .pho_slider { margin-top: 16px }
}
@media screen and (max-width:900px) {
  #custom_area:before { font-size: 100px }
  #custom_area .twoo_titbox { grid-template-columns: 1fr; gap: 25px; margin-bottom: 42px }
  #custom_area .twoo_right { justify-content: flex-start; padding: 0 }
  #custom_area .twoo_right .sec_desc { max-width: 650px }
  #custom_area #custom_box>ul { grid-template-columns: repeat(2,1fr); gap: 20px }
  #custom_area #custom_box>ul>li:last-child { grid-column: 1/-1; width: calc(50% - 10px); margin: 0 auto }
  #phoevn_area:before { font-size: 95px; left: -40px }
  #phoevn_area .phoevn_grid { grid-template-columns: 1fr; gap: 45px }
  #phoevn_area .pho_ltftbox { padding: 0 }
  #phoevn_area .pho_ltftbox .sec_desc { max-width: 650px }
  #phoevn_area .pho_rightbox { width: 100%; margin-left: auto }
  #phoevn_area .pho_main_inner { aspect-ratio: 16/10 }
}
@media screen and (max-width:768px) {
  #phoevn_area .phoevn_area_bg::before { width: 58vw; right: -12%; opacity: .1 }
  #phoevn_area .phoevn_area_bg::after { width: 160%; left: -30%; opacity: .1 }
  #phoevn_area { padding-bottom: 60px }
  #news_area .list_box .info_box { padding: 15px 0 }
  #youtube_box { padding-bottom: 60vw }
}
@media screen and (max-width:640px) {
  #book_area .list_box img { height: 65vw }
}
@media screen and (max-width:600px) {
  #custom_area:before { left: -20px; bottom: 20px; font-size: 65px }
  #custom_area .shapeJbox { width: 650px }
  #custom_area { padding-top: 100px }
  #custom_area .twoo_titbox { gap: 20px; margin-bottom: 32px }
  #custom_area #custom_box>ul { grid-template-columns: 1fr; gap: 18px }
  #custom_area #custom_box>ul>li:last-child { grid-column: auto; width: 100% }
  #custom_area .cuu_item { border-radius: 19px }
  #custom_area .cuu_info { padding: 25px 20px 23px }
  #custom_area .numberJJ { width: 40px; height: 40px; margin-bottom: 14px; font-size: 12px }
  #custom_area .h2 { font-size: 22px }
  #custom_area .article { max-width: 300px; font-size: 16px; line-height: 1.8 }
  #custom_area .cumboimg { aspect-ratio: 4/2.55 }
  #phoevn_area:before { left: -25px; top: 35px; font-size: 62px }
  #phoevn_area .phoevn_grid { gap: 34px }
  #phoevn_area .pho_rightbox { width: 100% }
  #phoevn_area .pho_main_inner { aspect-ratio: 4/3; border-radius: 22px }
  #phoevn_area .pho_count { right: 12px; bottom: 12px; padding: 8px 11px }
  #phoevn_area .pho_slider { margin: 13px -5px 0 }
  #phoevn_area .pho_slider .slick-slide { padding: 0 5px }
  #phoevn_area .pho_slider .img_scale { border-radius: 13px }
  #phoevn_area .pho_control { margin-top: 13px }
  .comm_btm { margin-top: 25px }
  .comm_btm a { gap: 18px; min-width: 160px; padding: 13px 17px 13px 21px; font-size: 13px }
  .comm_btm a i { width: 28px; height: 28px }
  .comm_btm a i:before { left: 8px; top: 13px }
  .comm_btm a i:after { right: 8px; top: 10px }
}
@media screen and (max-width:480px) {
  #phoevn_area .phoevn_area_bg::before { width: 70vw; right: -18% }
  #phoevn_area .phoevn_area_bg::after { width: 200%; left: -50% }
}
@media screen and (max-width:450px) {
  #product_area .bgBox { width: 100%; object-fit: cover }
}
@media screen and (min-width:1281px) {
  #product_area .list_box ul li:hover { transform: translate(0,-20px); -webkit-transform: translate(0,-20px) }
  #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) }
  #book_area .list_box li:hover .badge { background: var(--primary); color: var(--white) }
}