#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_en {margin-bottom:12px;font-size: 35px;font-weight:600;line-height:1.45;letter-spacing:.08em;font-family: "Google Sans", sans-serif;}
section .title_box {font-size: 35px;font-weight: 600;line-height: 1.6;letter-spacing: .05em;}
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%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* about_area */
#about_area {position:relative;width:100%;background-image: url(/images/44/aboutBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#about_area .about_layout {display:flex;align-items:center;justify-content:space-between;gap: 80px;}
#about_area .about_left {position:relative;width: 30%;white-space:normal;vertical-align:middle;}
#about_area .about_en { margin-bottom:25px; font-family:"Times New Roman","Noto Serif TC",serif; font-size:64px; font-weight:500; line-height:1; letter-spacing:-.025em; }
#about_area .about_slogan {margin-bottom:25px;font-size:24px;font-weight:600;line-height:1.6;letter-spacing:.05em;width: min(90%, 410px);}
#about_area .about_intro { max-width:510px; margin-bottom:38px; font-size:18px; font-weight:400; line-height:2; letter-spacing:.05em; }
#about_area .about_intro p { margin:0 0 5px; }
#about_area .about_more { width:230px; height:64px; padding:0 30px; align-items:center; justify-content:space-between; border:1px solid var(--primary); border-radius:999px; background:rgba(255,255,255,.7); backdrop-filter:blur(4px); font-size:18px; font-weight:600; letter-spacing:.12em; text-decoration:none; transition:.35s ease; }
#about_area .about_more:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
#about_area .about_more_arrow { margin-left:24px; font-family:Arial,sans-serif; font-size:20px; line-height:1; transition:.35s ease; }
#about_area .about_more:hover .about_more_arrow { transform:translateX(4px); }
#about_area .about_center { width:39%; white-space:normal; vertical-align:middle; }
#about_area .about_img { position:relative; width:100%; max-width:570px; aspect-ratio:1/1; margin:0 auto; overflow:hidden; border-radius:50%; background:#eef5f1; box-shadow:0 18px 50px rgba(var(--primary-rgb),.08); }
#about_area .about_img img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .8s cubic-bezier(.22,.61,.36,1); }
#about_area .about_img:hover img { transform:scale(1.025); }
#about_area .about_right { width:25%; white-space:normal; vertical-align:middle; }
#about_area .about_steps {position:relative;display:flex;flex-direction:column;gap: 45px;}
#about_area .about_step {position:relative;display: grid;align-items:center;z-index:1;grid-template-columns: 60px 1fr;gap: 20px;cursor: pointer;}
#about_area .about_step:first-child, #about_area .about_step:last-child{transform: translateX(-45px);}
#about_area .about_step_circle {position:relative;aspect-ratio: 1/1;display:flex;align-items:center;justify-content:center;border:1px solid rgba(var(--primary-rgb),.45);border-radius:50%;background:rgba(255,255,255,.93);color:var(--primary);font-size: 17px;font-weight:700;box-shadow:0 5px 16px rgba(var(--primary-rgb),.04);transition:.35s ease;font-family: "Google Sans", sans-serif;line-height: 1;}
#about_area .about_step.active .about_step_circle { border-color:var(--primary); background:var(--gradient-primary); color:#fff; box-shadow:0 8px 24px rgba(var(--primary-rgb),.16); }
#about_area .about_step_circle:after {content:"";position:absolute;width: 120%;height: 120%;border: 1px rgba(var(--primary-rgb),.38) dashed;border-left:0;border-radius: 98px;}
#about_area .about_step_circle:after {content:"";position:absolute;top:50%;left:50%;width:120%;height:120%;border:1px rgba(var(--primary-rgb),.38) dashed;border-left:0;border-radius:98px;transform:translate(-50%,-50%) rotate(0deg);}
#about_area .about_step:hover .about_step_circle:after {animation:aboutCircleRotate 5s linear infinite;}
@keyframes aboutCircleRotate {from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
#about_area .about_step_title {margin-bottom:7px;color:var(--primary);font-size: 22px;font-weight:600;line-height:1.4;letter-spacing:.1em;}
#about_area .about_step_en {color:var(--primary);font-size: 14px;font-weight:500;line-height:1.4;letter-spacing: .06em;font-family: "Google Sans", sans-serif;}
#about_area .about_step:hover .about_step_circle { background:var(--gradient-primary); border-color:var(--primary); color:#fff; transform:scale(1.04); }
#about_area .about_bg_decoration {position:absolute;right:0;bottom:-180px;width:62%;height:470px;pointer-events:none;opacity:.75;background:radial-gradient(ellipse at 50% 100%,rgba(118,154,87,.18) 0%,rgba(195,215,208,.13) 35%,rgba(255,255,255,0) 72%);transform: rotate(
-28deg);}
#about_area .about_img { overflow:hidden; }
#about_area .about_img img { opacity:1; transform:scale(1); transition:opacity .45s ease,transform .7s cubic-bezier(.22,.61,.36,1); }
#about_area .about_img img.changing { opacity:0; transform:scale(1.025); }
#about_area .about_step_circle { transition:.35s ease; }
#about_area .about_step.active .about_step_circle { background:var(--gradient-primary); border-color:var(--primary); color:var(--white); }
#about_area .about_step:hover .about_step_circle { border-color:var(--primary); }
#about_area .about_step_title,#about_area .about_step_en { transition:.35s ease; }
#about_area .about_step.active .about_step_title { color:var(--primary); }
@media screen and (max-width:1440px) {
  #about_area {background-position: 100% 50%;}
  #about_area .about_layout { gap: 35px; }
  #about_area .about_en { font-size: 55px; }
  #about_area .about_slogan { font-size: 21px; }
  #about_area .about_intro { font-size: 17px; }
  #about_area .about_step_circle {width: 58px;}
  #about_area .about_steps:before { left: 44px; }
  #about_area .about_step_content { padding-left: 32px; }
  #about_area .about_step_title { font-size: 21px; }
}
@media screen and (max-width:1200px) {
  #about_area .about_layout { flex-wrap: wrap; }
  #about_area .about_left { width: 46%; }
  #about_area .about_center { width: 46%; }
  #about_area .about_right { width: 100%; margin-top: 30px; }
  #about_area .about_steps { flex-direction: row; justify-content: space-between; gap: 15px; }
  #about_area .about_steps:before { top: 44px; bottom: auto; left: 8%; right: 8%; width: auto; height: 1px; }
  #about_area .about_step { width: 25%; display: block; text-align: center; }
    #about_area .about_step:first-child, #about_area .about_step:last-child{ transform: translateX(0);}
  #about_area .about_step_circle { margin: 0 auto 18px; }
  #about_area .about_step_circle:after { display: none; }
  #about_area .about_step_content { padding-left: 0; }
    #about_area .about_step_content *{text-align:center;}
}
@media screen and (max-width:760px) {
  #about_area {background-position: 80% 50%;}
    section{padding:12vw 0}
  #about_area .about_layout { display: block; }
  #about_area .about_left {width: 100%;}
  #about_area .about_left_line { top: 5px; bottom: 10px; }
  #about_area .about_en { margin-bottom: 18px; font-size: 42px; }
  #about_area .about_slogan { margin-bottom: 18px; font-size: 18px; }
  #about_area .about_intro { margin-bottom: 28px; font-size: 15px; line-height: 1.9; }
  #about_area .about_more { width: 190px; height: 54px; padding: 0 24px; font-size: 15px; }
  #about_area .about_center { width: 100%; margin-top: 42px; }
  #about_area .about_img { width: 88%; max-width: 500px; }
  #about_area .about_right { width: 100%; margin-top: 45px; }
  #about_area .about_steps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 15px; }
  #about_area .about_steps:before { display: none; }
  #about_area .about_step { width: 100%; }
  #about_area .about_step_circle { width: 74px; height: 74px; flex-basis: 74px; margin-bottom: 12px; font-size: 19px; }
  #about_area .about_step_title { font-size: 18px; }
  #about_area .about_step_en { font-size: 12px; }
  #about_area .about_leaf_left { opacity: .22; }
  #about_area .about_leaf_right { opacity: .17; }
  #about_area .about_molecule_1 { opacity: .35; transform: scale(.7); transform-origin: left bottom; }
  #about_area .about_molecule_2 { opacity: .3; transform: scale(.65); transform-origin: right top; }
}

/* product_area */
#product_area{z-index:2}
#product_area .bg_box {z-index:-1}
#product_area .product_heading {margin-bottom: 34px;}
#product_area .product_heading .title_en, #book_area .title_en {margin-bottom: 0px;font-size: 22px;}
#product_area .product_heading_desc {margin-top: 4px;color: var(--primary);font-size: 20px;font-weight: 500;line-height: 1.45;letter-spacing: 0.1em;}
#product_area #product_list {position: relative;}
#product_area #product_list > ul {padding: 0;white-space: normal;}
#product_area #product_list .slick-list {overflow: hidden;}
#product_area #product_list .slick-track {display: flex;align-items: stretch;gap: 30px;}
#product_area #product_list .slick-slide > div { height: 100%; }
#product_area #product_list li {position: relative;overflow: hidden;border: 1px solid rgba(var(--primary-rgb),.05);border-radius: 16px;background: #fff;box-shadow: 0 5px 15px rgba(var(--primary-rgb),.07);transition: transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;margin: 10px 0;}
#product_area #product_list li:hover {transform: translateY(-10px);}
#product_area #product_list li .product_pic {position: relative;width: 100%;height: auto;aspect-ratio: 4/3;overflow: hidden;background: #edf4ef;}
#product_area #product_list li .product_pic img { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; display: block; object-fit: cover !important; object-position: center !important; transform: none; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
#product_area #product_list li:hover .product_pic img { transform: scale(1.035); }
#product_area #product_list li .product_info {position: relative;padding: 25px;display: block;background: #fff;text-align: center;z-index: 2;}
#product_area #product_list li .product_info:before {content: "";position: absolute;top: -35px;left: -8%;width: 116%;height: 72px;border-radius: 50% 50% 0 0/100% 100% 0 0;background: #fff;z-index: 0;pointer-events: none;}
#product_area #product_list li .product_icon {position: absolute;top: -63px;left: 50%;width: 75px;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;overflow: hidden;border-radius: 50%;background: #fff;transform: translateX(-50%);z-index: 3;}
#product_area #product_list li .product_icon img {position: relative !important;width: 45px;aspect-ratio: 1/1;display: block;object-fit: contain;object-position: center;z-index: 2;}
#product_area #product_list li .product_name { position: relative; margin: 0 0 10px; color: var(--primary); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: .05em; text-align: center; z-index: 2; }
#product_area #product_list li .product_desc {position: relative;color: #45534a;font-weight: 400;line-height: 1.75;letter-spacing: .02em;text-align: justify;z-index: 2;-webkit-line-clamp: 3;height: auto;}
#product_area #product_list li .product_desc p { margin: 0; }
#product_area #product_list li .product_arrow { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin: 13px auto 0; border: 1px solid rgba(var(--primary-rgb),.45); border-radius: 50%; color: var(--primary); background: #fff; font-family: Arial,sans-serif; font-size: 15px; line-height: 1; z-index: 2; transition: .3s ease; }
#product_area #product_list li:hover .product_arrow { border-color: var(--primary); background: var(--primary); color: #fff; transform: translateX(3px); }
#product_area #product_list li > .atag_item { z-index: 5; }
#product_area #product_list .slick-arrow {position: absolute;top: 42%;width: 58px;height: 58px;display: flex;align-items: center;justify-content: center;padding: 0;border-radius: 50%;background: #fff;color: transparent;font-size: 0;background: var(--primary);cursor: pointer;transform: translateY(-50%);z-index: 10;transition: .3s ease;}
#product_area #product_list .slick-arrow:before {margin: 0;color: white;font-size: 20px;font-weight: 300;line-height: 1;opacity: 1;font-family: "Google Sans", sans-serif;}
#product_area #product_list .slick-prev {left: -90px;}
#product_area #product_list .slick-next {right: -100px;}
#product_area #product_list .slick-prev:before { content: "←"; }
#product_area #product_list .slick-next:before { content: "→"; }
#product_area #product_list .slick-arrow:hover {background: var(--secondary);}
#product_area #product_list .slick-arrow:hover:before { color: #fff; }
#product_area #product_list .slick-disabled { opacity: .3; cursor: default; }
#product_area #product_list .slick-disabled:hover { border-color: rgba(var(--primary-rgb),.25); background: #fff; }
#product_area #product_list .slick-disabled:hover:before { color: var(--primary); }
#product_area #product_list .slick-dots { display: none !important; }
#product_area:before { content: ""; position: absolute; top: -130px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle,rgba(var(--triadic2-rgb),.26) 0%,rgba(var(--triadic2-rgb),0) 70%); pointer-events: none; }
#product_area:after {content: "";position: absolute;bottom: -170px;left: -120px;width: 430px;height: 430px;border-radius: 50%;background: radial-gradient(circle,rgba(var(--triadic1-rgb),.12) 0%,rgba(var(--triadic1-rgb),0) 72%);pointer-events: none;}
@media screen and (max-width:1440px) {
    #product_area #product_list .slick-prev {left: -60px;}
#product_area #product_list .slick-next {right: -60px;}
  #product_area #product_list { padding: 0 40px; }
  #product_area #product_list li .product_pic { aspect-ratio: 1.2/1 !important; }
}
@media screen and (max-width:900px) {
  #product_area .workframe { width: 94%; }
  #product_area .title_box { font-size: 31px; }
  #product_area .product_heading_desc { font-size: 24px; }
}
@media screen and (max-width:640px) {
    #product_area #product_list li .product_info{padding-top: 10px;}
  #product_area { padding: 50px 0 60px; }
  #product_area .workframe { width: 90%; }
  #product_area .product_heading { margin-bottom: 26px; }
  #product_area .title_box { font-size: 27px; }
  #product_area .product_heading_desc { margin-top: 4px; font-size: 19px; }
  #product_area #product_list {padding: 0;}
  #product_area #product_list > ul { margin: 0 -6px; }
  #product_area #product_list li .product_info:before { top: -32px; height: 65px; }
  #product_area #product_list li .product_icon {top: -59px;width: 58px;height: 58px;}
  #product_area #product_list li .product_icon img { width: 35px !important; height: 35px !important; }
  #product_area #product_list li .product_name { font-size: 19px; }
  #product_area #product_list li .product_desc { min-height: 0; font-size: 14px; line-height: 1.8; }
  #product_area #product_list .slick-arrow {width: 45px;height: 45px;}
    #product_area #product_list .slick-prev {left: -5px;}
#product_area #product_list .slick-next {right: -8px;}
  #product_area #product_list .slick-arrow:before { font-size: 14px; }
}

/* book area */
#book_area{border-top:1px solid #e8f2ee;}
#book_area .bg_box{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(var(--triadic2-rgb),.08) 100%);z-index:-1;background-size:cover;background-repeat:no-repeat;opacity:.5;}
#book_area .workframe{z-index:2;}
#book_area .book_head{align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px;}
#book_area .book_head_text{min-width:0;}
#book_area .book_en{margin-bottom:8px;color:var(--secondary);font-size:13px;font-weight:600;letter-spacing:.18em;line-height:1;}
#book_area .book_desc{margin-top: 4px;color: var(--primary);font-size: 20px;font-weight: 500;line-height: 1.45;letter-spacing: 0.1em;}
#book_area .book_head_action{flex:0 0 auto;align-items:center;gap:18px;}
#book_area .book_arrows{align-items:center;gap:8px;}
#book_area .book_arrow{position:relative;width: 47px;aspect-ratio: 1/1;padding:0;border-radius:50%;cursor:pointer;transition:.35s ease;font-family: "Google Sans", sans-serif;color: white;background: var(--primary);}
#book_area .book_arrow span{position:absolute;top:50%;left:50%;width:13px;height:1px;background:var(--primary);transform:translate(-50%,-50%);transition:.35s ease;}
#book_area .book_arrow span:after{content:"";position:absolute;top:50%;width:6px;height:6px;border-top:1px solid var(--primary);border-right:1px solid var(--primary);}
#book_area .book_prev span:after{left:0;transform:translateY(-50%) rotate(-135deg);}
#book_area .book_next span:after{right:0;transform:translateY(-50%) rotate(45deg);}
#book_area .book_arrow:hover{background: var(--secondary);}
#book_area .book_arrow:hover span{background:#fff;}
#book_area .book_arrow:hover span:after{border-color:#fff;}
#book_area .book_slider_wrap { padding: 0; }
#book_area .book_slider { margin: 0 -13px; }
#book_area .book_slider .slick-list { overflow: hidden; }
#book_area .book_item {padding: 0 15px;}
#book_area .book_card { padding: 0 0 4px; }
#book_area .book_media {aspect-ratio: 4/3;border-radius: 9px;background: #eef3ef;box-shadow: 0 6px 22px rgba(var(--primary-rgb),.07);}
#book_area .book_media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
#book_area .book_name {margin: 14px 0 0;font-size: 17px;font-weight: 500;line-height: 1.45;letter-spacing: .06em;color: #323232;}
#book_area .book_card:hover .book_media img { transform: scale(1.035); }
#book_area .book_link { z-index: 4; }
@media screen and (max-width:1024px) {
  #book_area { padding: 60px 0 65px; }
  #book_area .title_box { font-size: 30px; }
  #book_area .book_head_action { gap: 14px; }
}
@media screen and (max-width:768px) {
  #book_area { padding: 52px 0 58px; }
  #book_area .book_head { align-items: flex-start; margin-bottom: 28px; }
  #book_area .title_box { font-size: 27px; }
  #book_area .book_desc { font-size: 15px; }
  #book_area .book_head_action { gap: 10px; }
  #book_area .book_item { padding: 0 9px; }
  #book_area .book_slider { margin: 0 -9px; }
}
@media screen and (max-width:480px) {
  #book_area { padding: 45px 0 50px; }
  #book_area .book_head { display: block; margin-bottom: 25px; }
  #book_area .book_head_action { margin-top: 18px; justify-content: flex-end; }
  #book_area .title_box { font-size: 24px; }
  #book_area .book_name { font-size: 16px; }
}