#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .titleBox{margin-bottom: 40px;}
section .entitle_box {font-size: 50px;line-height:1;font-weight:700;letter-spacing:2px;color:var(--primary);font-family: "Archivo", sans-serif;}
section .title_box {display:flex;align-items:center;gap: 25px;margin-top:14px;font-size: 30px;font-weight: 900;letter-spacing:1px;color:var(--primary);font-family: 'Noto Serif TC';}
section .title_box span{width: 13px;aspect-ratio: 1;background: var(--primary);border-radius: 50px;position: relative;}
section .title_box span:before{content:'';width: 13px;aspect-ratio: 1;background: var(--secondary);border-radius: 50px;position: absolute;right: -10px;}
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%); }
section .consult_btn{display:inline-flex;align-items:center;justify-content:center;gap: 38px;padding: 14px 35px;border-radius: 50px;color: var(--complement);font-size:15px;font-weight:500;letter-spacing:1px;text-decoration:none;transition:all .3s ease;border: 1px solid var(--complement);}
section .consult_btn *{color: #1278c9;font-size: 16px;font-weight: 500;}
section .consult_btn .arrow{font-size: 23px;font-weight:300;line-height: 0;transition:transform .3s ease;transform: translateY(-2px);}
section .consult_btn:hover{background: var(--triadic1);border-color: var(--triadic1);}
section .consult_btn:hover *{color:white;}
section .consult_btn:hover .arrow{transform: translateY(-2px) translateX(4px);}

/* product_area */
#product_area{position:relative;padding-top: 40px;padding-bottom: 0;}
#product_area .service_inner{position:relative;z-index: 5;}
#product_area .titleBox{width: min(90%,1380px);margin:0 auto 55px;}
#product_area .service_slider_wrap{position:relative;width: min(90%,1380px);margin:auto;padding:0 76px;}
#product_area .service_slider_box{padding:0 0 35px;}
#product_area .service_slider{display: grid;grid-template-columns: repeat(3, 1fr);gap: 25px;}
#product_area .service_item{position:relative;padding-top:0;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
#product_area .service_item.is-lower{padding-top:32px;}
#product_area .service_card{position:relative;text-decoration:none;border-radius:14px;white-space: unset;display: flex;align-items: center;box-shadow: 0 0 15px rgb(11 79 147 / 25%);}
#product_area .service_pic{position:relative;width:100%;aspect-ratio: 1.65/1;overflow:hidden;border-radius: 15px;background:#f3f7fa;}
#product_area .service_pic:after{content:'';position:absolute;width:70%;height:100%;left:0;top:0;background:#fff;clip-path: polygon(0 0,100% 0,45% 100%,0 100%);z-index:2;pointer-events:none;}
#product_area .service_pic:before{content:'';position:absolute;width: 73%;height:100%;left:0;top:0;clip-path: polygon(0 0,100% 0,45% 100%,0 100%);z-index:2;pointer-events:none;background: linear-gradient(0deg, rgb(255 255 255 / 0%), rgb(203 229 255 / 50%));}
#product_area .service_pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
#product_area .service_info{position: absolute;padding: 40px;border-radius:14px;z-index:2;height: 100%;display: flex;flex-direction: column;justify-content: center;width: 50%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#product_area .service_name{margin-bottom:12px;font-size: 22px;line-height:1.3;font-weight:700;color: var(--triadic1);}
#product_area .service_name:after{content:'';display: block;width: 30px;height: 2px;background: var(--gray);margin-top: 10px;opacity: .5;}
#product_area .service_desc{margin: 0 0 30px;line-height:1.8;color: #454749;height: auto;font-family: 'Arimo';font-size: 15px;display: block;line-height: 1.3;overflow: unset;}
#product_area .service_arrow{width: 36px;aspect-ratio: 1/1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#edf0f4;color:#728093;font-size: 16px;line-height:1;transition:.35s;}
#product_area .slick-current .service_arrow{background:var(--complement);color:#fff;}
#product_area .service_card:hover .service_pic img{transform:scale(1.035);}
#product_area .service_card:hover .service_arrow{background:var(--complement);color:#fff;transform:translateX(3px);}
#product_area .service_nav{position:absolute;top:50%;width:54px;aspect-ratio: 1/1;border: 1px solid var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transform:translateY(-50%);transition:.3s;background: transparent;}
#product_area .service_nav svg{fill:var(--primary);width: 18px;height: 18px;}
#product_area .service_nav:hover{background:var(--primary);}
#product_area .service_nav:hover svg{fill:white;}
#product_area .service_prev{left: -10px;}
#product_area .service_prev svg{transform:scaleX(-1);}
#product_area .service_next{right: -10px;}
#product_area .service_bottom{display:flex;justify-content:center;margin-top:25px;}
@media screen and (max-width:1440px) {
    #product_area .titleBox, #product_area .service_slider_wrap{width: min(90%, 1200px);}
}
@media screen and (max-width:1280px) {
  #product_area .service_slider_wrap {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding: 0;}
  #product_area .service_slider .slick-slide { padding: 0 11px; }
  #product_area .service_name { font-size: 22px; }
}
@media screen and (max-width:1024px) {
    #product_area .service_slider{grid-template-columns: repeat(2, 1fr);}
  #product_area {padding: 80px 0 0;}
  #product_area .entitle_box { font-size: 36px; }
  #product_area .service_info { padding: 25px 65px 24px 24px; }
}
@media screen and (max-width:768px) {
  #product_area .titleBox { margin-bottom: 35px; }
  #product_area .entitle_box { font-size: 30px; }
  #product_area .title_box { font-size: 20px; }
  #product_area .service_nav {width: 55px;transform: unset;top: unset;bottom: -81px;}
#product_area .service_prev{left: 10%;}
    #product_area .service_nav{display: none !important;}
#product_area .service_next{right: 10%;}
  #product_area .service_desc { font-size: 15px; }
}
@media screen and (max-width:520px) {
  #product_area {padding: 55px 0 0;}
  #product_area .service_slider {grid-template-columns: 1fr;}
  #product_area .service_slider .slick-slide { padding: 0 7px; }
  #product_area .service_item.is-lower { padding-top: 0; }
  #product_area .service_pic { aspect-ratio: 1.35/1; }
  #product_area .service_name { font-size: 21px; }
  #product_area .service_bottom { margin-top: 10px; }
    section .consult_btn{gap:20px;}
}

/* about_area */
#about_area{position:relative;background-image: url(/images/44/about_bg.jpg);background-repeat: no-repeat;background-size: 75%;background-position: 70% 50%;padding-top: 0;z-index: 5;}
#about_area .about_inner{position:relative;z-index:2;width: min(88%,1600px);margin: auto 0 auto auto;display: grid;align-items:center;grid-template-columns: 40% 60%;justify-content: space-between;}
#about_area .about_visual{transform: translateX(25px);}
#about_area .about_content{position:relative;z-index:3;padding:35px 0 30px;}
#about_area .about_en{margin-bottom:28px;font-size:15px;line-height: 1;font-weight: 700;letter-spacing: 2px;color: var(--primary);font-family: "Archivo", sans-serif;text-transform: uppercase;}
#about_area .title_box {margin-bottom:26px;font-size: 45px;font-weight:900;line-height: 1.5;letter-spacing:.025em;width: 90%;}
#about_area .about_intro p{width: 90%;color:#687484;font-size:16px;line-height:1.9;letter-spacing:.025em;margin-bottom: 40px;}
#about_area .about_top{right:0;top:0;width:49%;height:350px;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);}
#about_area .about_top:after{left:17%;top:75px;}
#about_area .about_bottom{right:10%;bottom:0;width:46%;height:330px;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);}
#about_area .about_bottom:after{right:17%;bottom:72px;}
#about_area .about_visual_line { position: absolute; left: 38%; top: 78px; width: 1px; height: 485px; background: linear-gradient(180deg,transparent,rgba(33,150,243,.16),transparent); transform: rotate(28deg); transform-origin: center; pointer-events: none; }
#about_area .consult_btn {background: var(--gradient-cta);border: 0;}
#about_area .consult_btn *{color:white}
#about_area .consult_btn:hover{background:linear-gradient(90deg, #05235a, #05235a);}
@media screen and (max-width:1440px) {
#product_area .service_info{padding:30px;}
    #product_area .service_desc{margin: 0 0 15px;}
}
@media screen and (max-width:1280px) {
    #about_area .about_inner{width: 95%;}
    #about_area .title_box{font-size:35px;}
}
@media screen and (max-width:1024px) {
    #about_area .about_visual{transform: translateX(25px) translateY(-45px);pointer-events: none;}
  #about_area .about_inner {display: flex;flex-direction: column-reverse;align-items: flex-start;}
    #about_area{background-size: 105%;}
  #about_area .about_content {padding: 0 0 40px;width: 95%;}
  #about_area .about_intro { width: 100%; }
}
@media screen and (max-width:768px) {
  #about_area .about_visual{transform: translateX(25px) translateY(20px);pointer-events: none;}
  #about_area {padding: 0 0 60px;}
  #about_area .about_content {width: 100%;padding: 0;}
  #about_area .about_en { margin-bottom: 18px; }
  #about_area .about_title { font-size: clamp(30px,7vw,42px); margin-bottom: 20px; }
  #about_area .about_intro { font-size: 15px; line-height: 1.85; }
}
@media screen and (max-width:550px) {
    #about_area .title_box{font-size: 24px;}
  #about_area {padding: 0 0 65px;background-size: 200%;}
  #about_area .about_inner { width: 90%; }
  #about_area .about_visual_item:after { width: 7px; height: 58px; }
}

/* News List */
#news_area .titleBox *{text-align:center;display: block;}
#news_area .titleBox .title_box{margin-bottom: 10px;}
#news_area .nlist{margin-top:45px;}
#news_area .nlist ul{margin:0 -18px;}
#news_area .nlist .slick-list{overflow:hidden;}
#news_area .nlist .slick-track{display:flex;}
#news_area .nlist .slick-slide{height:auto;padding:0 18px;}
#news_area .nlist .slick-slide>div{height:100%;}
#news_area .nlist li{height:100%;vertical-align:top;}
#news_area .nlist li>.pos_rel{height:100%;padding:26px 0 0;border-top: 1px solid var(--triadic1);}
#news_area .nlist .more_btn{position:relative;z-index:3;margin-bottom:12px;padding:0;background:none;border-radius:0;font-size:15px;font-weight:600;line-height:1.5;letter-spacing:.04em;color: var(--triadic1);text-align:left;}
#news_area .nlist article{position:relative;z-index:2;height: 52px;margin: 0 0 40px;line-height:1.6;letter-spacing:.025em;color: #687484;-webkit-line-clamp:2;white-space:normal;}
#news_area .nlist .info_box{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
#news_area .nlist .info_box .time{margin:0;font-size: 14px;font-weight:500;line-height:1;color:#91a0b5;letter-spacing:.02em;font-family: "Arimo", sans-serif;}
#news_area .nlist .info_box span{display:inline-block;font-size:14px;font-weight:500;line-height:1;color:#91a0b5;transition:.3s;}
#news_area .nlist .img_box{width:100%;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#f2f6fa;}
#news_area .nlist .img_box svg{display:block;width:100%;height:100%;}
#news_area .nlist .img_box img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
#news_area .nlist .h3{position:relative;z-index:2;margin-top:18px;font-size: 20px;font-weight:600;line-height:1.55;letter-spacing:.015em;color:#102943;white-space:normal;-webkit-line-clamp:2;height: 62px;}
#news_area .nlist li>.pos_rel>a.atag_item{z-index: 4;}
#news_area .nlist li:hover .img_box img{transform:scale(1.045);}
#news_area .nlist li:hover .info_box span{color:var(--complement);}
#news_area .nlist li:hover .h3{color:var(--primary);}
@media screen and (max-width:1280px) {
  #news_area .nlist ul { margin: 0 -14px; }
  #news_area .nlist .slick-slide { padding: 0 14px; }
}
@media screen and (max-width:1024px) {
  #news_area .nlist { margin-top: 35px; }
  #news_area .nlist li>.pos_rel { padding-top: 22px; }
  #news_area .nlist .img_box { border-radius: 18px; }
}
@media screen and (max-width:768px) {
  #news_area .nlist ul { margin: 0 -10px; }
  #news_area .nlist .slick-slide { padding: 0 10px; }
  #news_area .nlist .more_btn { font-size: 14px; }
  #news_area .nlist .info_box .time { font-size: 14px; }
  #news_area .nlist .info_box span { font-size: 13px; }
}
@media screen and (max-width:550px) {
    section{padding: 12vw 0;}
  #news_area .nlist { margin-top: 30px; }
  #news_area .nlist ul { margin: 0; }
  #news_area .nlist .slick-slide { padding: 0 5px; }
  #news_area .nlist li>.pos_rel { padding-top: 20px; }
  #news_area .nlist .img_box { border-radius: 16px; }
}
