@import url('https://fonts.googleapis.com/css?family=Damion&display=swap');

.sectionTitle h2{font-family: 'Damion', "微軟正黑體";font-size: 70px;color: #000;font-weight: normal;}

.flex{display: flex;}
.btn a{
	width: 400px;
	border-radius: 6px;
    box-shadow: inset 0 0 0 2px #1f79a9;
    font-size: 16px;
    position: relative;
    display: block;
    color: #1f79a9;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: ease .3s;
}
.btn a span{
	position: relative;
    display: block;
    z-index: 4;
    height: 100%;
    width: 100%;
    padding: 28px 40px;
    text-align: center;
}
.btn a span i{
	position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}
.btn a::after{
	position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: block;
    z-index: 2;
    height: 100%;
    width: 0;
    background-color: #1f79a9;
    border-radius: 6px;
    transition: width 0.3s ease;
}
.btn a:hover::after{width: 100%;}
.btn a:hover{color: #fff;}

#products .flex,#bookbox .flex{align-items: center;}
#products .btn,#bookbox .btn{padding-left: 40px;}
#products .btn a,#bookbox .btn a{width: 250px;}
#products .btn a span,#bookbox .btn a span{padding: 18px 40px;}

#products{padding-top: 95px;}
#products .product-item .photobox{display: inline-block;padding: 20px;background: #fff;}
#products .product-item .photobox > div{overflow: hidden;}
#products .product-item a.photo{transition: ease .3s;}
#products .product-item a.photo:hover{transform: scale(1.15);}
#products .product-item .info{display: block;padding: 40px 37px 36px 40px;background: #fff;}
#products .product-item .info .proCate{padding: 3px 8px;font-size: 11px;display: inline-block;background: #894eb7;color: #fff;margin: 0 0 11px;}
#products .product-item .info .desc{font-size: 16px;margin-bottom: 11px;-webkit-line-clamp: 2;}
#products .product-item .info-content{display: none;transform: translateX(20px);box-shadow: 0 10px 17.5px 0.5px rgba(0, 0, 0, 0.2);position: absolute;right: -70px;top: 280px; width: 500px;opacity: 0;z-index: 2;}
#products .product-item .info .title{font-size: 24px;margin: 0 0 17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#products .product-item .info .price span{font-size: 14px;color: #fff;}
#products .product-item .info .price span.old{text-decoration: line-through;display: inline-block; padding: 3px 8px;background: #568e6d}
#products .product-item .info .price span.sale{display: inline-block;padding: 3px 8px;background: #d8608d;margin-left: 20px;}
#products .swiper-container{margin: 25px 0px 0px 40px;overflow: inherit;z-index: 0;}
#products .swiper-container::before{
	position: absolute;
    left: -40px;
    top: 48.5%;
    content: '';
    display: block;
    z-index: -1;
    height: 100%;
    width: 84%;
    background-color: #1f79a9;;
}
#products .sectionTitle h2:first-letter,#bookbox .sectionTitle h2:first-letter{color: #1f79a9;}
/*#products .product-item.swiper-slide{margin: 0 0 0 40px}*/
#products .product-item.swiper-slide-active .info-content{display: block;}
#products .product-item.swiper-slide-active .info-content.active{opacity: 1;transform: translateX(0px); transition: linear .3s;}
#products .swiper-button-next,#products .swiper-button-prev{width: 50px;height: 50px;background: #1f79a9;border-radius: 50%;color: #fff;display: flex;justify-content: center;align-items: center;top: 50%;transform: translateY(-50%);box-shadow: 0 10px 17.5px 0.5px rgba(0, 0, 0, 0.2);}
#products .swiper-button-next{left: 605px;}
#products .swiper-button-prev{left: -15px;}

/*截角*/
.product-item .productIndex{
    position: absolute;
    display: block;
    z-index: 1;
    font-family: 'Damion', cursive;
    letter-spacing: 0;
    letter-spacing: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    left: 19px;
    top: 13px;
    font-size: 24px;
}
.product-item .productIndex:before{
    position: absolute;
    left: -10px;
    top: 12px;
    border-width: 48px 48px 0 0;
    content: '';
    display: block;
    z-index: -1;
    height: 0;
    width: 0;
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
/*進度條*/
#progress-content{
    display: flex;
    justify-content: center;
    padding-left: 450px;
    z-index: 5000;
    align-items: center;
    padding-top: 65px;
}
#progress-content .swiper-pagination,#progress-content #seek_total{
    height: 28px;
    width: 62px;
    line-height: 0;
    text-align: center;
}
#progress-content .swiper-pagination{
    position: relative;
    overflow: hidden;
}
.seek_bar {
    position: relative;
    overflow: hidden;
    height: 3px;
    width: 210px;
    background-color: #000;
}
.seek_line{
    position: absolute;
    left: -100%;
    height: 3px;
    width: 210px;
    background-color: #fff;
}
.seek_line.start{
    animation-name: progressStart;
    animation-duration:3s; 

}
.seek_line.change{
    animation-name: progressChange;
    animation-duration:0.5s; 
}
@keyframes progressStart {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@keyframes progressChange{
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}
#progress-content #seek_total,#progress-content .swiper-pagination-bullet{
    font-size: 28px;
    font-family: 'Damion', cursive;
    color: #fff;
}
#progress-content .swiper-pagination-bullet{
    position: absolute;
    left: 0;
    top: -23px;
    width: 100%;
    padding: 10px 0 0;
    text-align: center;
    transform: translateY(28px);
    -webkit-transform: translateY(28px);
    background: none;
    opacity: 1;
}

#progress-content .swiper-pagination-bullet-active{
    transform: translateY(0); 
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;

    -webkit-transform: translateY(0);
  }
#progress-content .seek_num._leave {
    transform: translateY(-28px); 
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;

    -webkit-transform: translateY(-28px);
  }

#progress-content #seek_total {
    padding: 9px 0 0;
}







#NPBox{padding-bottom: 120px;padding-top: 60px;}
#NPBox .sectionTitle h2{text-align: center;color: #fff;}
#NPBox .btn a{margin: 0 auto;}
#NPBox .new-list{display: flex;flex-wrap: wrap;margin: 0 -1.25%;padding: 0 0 70px;}
#NPBox .news-item{
	padding: 20px 20px 16px;
    margin: 0 1.33% 40px;
    width: 30.6%;
    background: #fff;
}
#NPBox .news-item .photobox{overflow: hidden;}
#NPBox .news-item a.photo{display: block;transition: ease .3s;}
#NPBox .news-item a.photo:hover{transform: scale(1.15);}
#NPBox .news-item .info{margin: 23px 0 15px;}
#NPBox .news-item .info .date{font-family: 'Damion', cursive;margin: 0 12px 0 0;font-size: 18px;color: #414c65;}
#NPBox .news-item .info .cate{font-size: 11px;background: #c45220;padding: 3px 8px;color: #fff;}
#NPBox .news-item .info > p{margin: 23px 0 15px;}
#NPBox .news-item .info h3{margin: 0 0 28px;font-size: 16px; -webkit-line-clamp:2;}

#bookbox .flex{margin-bottom: 36px;}
#bookbox .book-bg{padding-top: 100px;margin-left: 95px;position: relative;padding-bottom: 160px;}
#bookbox .book-bg::before{
    position: absolute;
    right: 0;
    top: 0;
    content: '';
    display: block;
    background-color: #1f79a9;
    height: 82%;width: 74%;
}
#bookbox .book-item{height: 100%;padding: 20px 20px 15px;transition: box-shadow 0.3s ease;background: #fff;}
#bookbox .book-item .photobox > div{overflow: hidden;margin-bottom: 20px;}
#bookbox .book-item a.photo{display: block;transition: ease .3s;}
#bookbox .book-item a.photo:hover{transform: scale(1.15);}
#bookbox .book-item .info{
	color: #272727;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
    -webkit-line-clamp:2;
}
#bookbox .book-item .info h3{font-size: 16px;}
#bookbox .book-item .info .title{-webkit-line-clamp:2;}
#bookbox .book-bg{overflow: hidden;}
#bookbox .swiper-container{padding-bottom: 115px;overflow-y: inherit;}
#bookbox .swiper-button-next,#bookbox .swiper-button-prev{width: 40px;height: 40px;background: #1f79a9;border-radius: 50%;color: #fff;display: flex;justify-content: center;align-items: center;bottom: 0px;top: auto; transform: translateY(-50%);box-shadow: 0 10px 17.5px 0.5px rgba(0, 0, 0, 0.2);}
#bookbox .swiper-button-next{left: 150px;}
#bookbox .swiper-button-prev{left: 50px;}

#ssbanner .bxslider{display: flex;}
#ssbanner .bxslider .ssbanner-item{width: 24%;margin: 0 0.9%;}
#ssbanner .bxslider .ssbanner-item a.photo,#ssbanner .bxslider .ssbanner-item a.photo img{height: 100%;}
#ssbanner .bxslider .ssbanner-item a.photo{transition: ease .3s;position: relative;}
#ssbanner .bxslider .ssbanner-item .photoCircle{    background: #fff;border-radius: 50%;overflow: hidden;width: 324px;height: 324px;margin: 0 auto;}
#ssbanner .bxslider .ssbanner-item .txt{margin-top: 15px;display: flex;justify-content: space-between;align-items: center;padding: 0 30px;}
#ssbanner .bxslider .ssbanner-item .txt .title{font-size: 16px; display: inline-block;width: 90%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition: ease .3s;}
#ssbanner .bxslider .ssbanner-item .txt:hover .title{color: #1f79a9;}
#ssbanner .bxslider .ssbanner-item .txt i{color: #1f79a9;}

#other-content{padding-top: 120px;}
#other-content.noneCI{display: none;}
#other-content .other-set{display: flex;}
#other-content .other-set .item{width: 33%;justify-content: center;padding: 60px;background: #fff;position: relative;}
#other-content .other-set .item::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: #1f79a9;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    transition: transform .3s;
}
#other-content .other-set .item:hover::before{
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

#other-content .other-set .item:nth-child(2){border-right: 1px solid #e2e2e2;border-left: 1px solid #e2e2e2;}
#other-content .other-set .item .othertitle p{text-align: center;font-size: 22px;margin-bottom: 15px;}
#other-content .other-set .item font{text-align: center;font-size: 16px;}
#other-content .other-set .item article{position: relative;transition: ease .3s;}
#other-content .other-set .item:hover article{color: #fff;}
#aboutBox{padding-top: 100px;}
#aboutBox .about-img{background-size: cover;padding: 50px 0px;position: relative;}
#aboutBox .about-img::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);}
#aboutBox .about-info{text-align: center; width: 50%;margin: 0 auto;position: relative;z-index: 1;color: #fff;}
#aboutBox .about-info h2{text-align: center;font-size: 44px;display: inline-block;}
#aboutBox .about-info > span{font-size: 24px;margin-left: 10px;}
#aboutBox .about-info .subtitle{font-size: 24px;padding-left: 10px;}
#aboutBox #SeoStarRating{text-align: center;padding: 10px 0px;}
#aboutBox #youtube iframe{    width: 100%;padding: 0 70px;height: 300px;}
#aboutBox .about-info .info{text-align: center;padding-top: 10px;font-size: 16px;}
#aboutBox .btn a{margin: 35px auto 0px;width: 316px;color: #fff;box-shadow: inset 0 0 0 2px #fff;}
#aboutBox .btn a::after{z-index: -1; background-color: #fff;}
#aboutBox .btn a:hover{color: #1f79a9;}

@media screen and (min-width: 1024px){
    #ssbanner .bxslider .ssbanner-item a.photo:hover{transform: scale(1.1);}
}

@media screen and (min-width: 768px){
	#products .product-item .photobox{width:100%}
	#products .swiper-slide{width:  640px !important;}
	
}

@media screen and (max-width: 1400px){
    #products .swiper-container::before{width: 90%;}
    #progress-content{padding-left: 500px;}
}
@media screen and (max-width: 1280px){
    #products .swiper-container::before{width: 92%;}
    #progress-content{padding-left: 580px;}
}
@media screen and (max-width: 1200px){
    #ssbanner .bxslider .ssbanner-item .photoCircle{width: 280px;height: 280px;}
    #products .swiper-container{padding-bottom: 100px;}
    #progress-content{display: none;}
}
@media screen and (max-width: 1024px){
    #aboutBox .about-info{width: 70%;}
    .btn a span{padding: 20px 40px;}
}
@media screen and (max-width: 940px){
    #products .swiper-container::before{width: 98%;}
}
@media screen and (max-width: 768px){
    .sectionTitle h2{font-size: 48px;}
    .flex{flex-wrap: wrap;}
    #NPBox .btn a{width: 70%;}
    .btn a span{padding: 20px 25px;}
    #products .swiper-container{margin:0 auto;}
    #products .swiper-slide{width: 100% !important;}
    #products .product-item .photobox{width: 100%;}
    #products .product-item a.photo{display: block;background-size: cover;}
    #products .product-item .info-content{right: auto;left: 5%;width: 90%;}
    #products .swiper-button-prev{left: 15px;}
    #products .swiper-button-next{right: 15px;left: auto;}
    .product-item .productIndex{left: 18px;}
    #products .swiper-container::before{width: 100%;left: 0px;}
    #NPBox{padding-top: 100px;}
    #NPBox .news-item{width: 47%;}
    #bookbox .book-bg{margin-left: 15px;}
    #bookbox .book-bg::before{height: 78%;}
    #bookbox .book-item{width: 74% !important;min-width: 340px;}
    #bookbox .swiper-button-next, #bookbox .swiper-button-prev{bottom: 25px;}
    #bookbox .swiper-button-next{left: 100px;}
    #bookbox .swiper-button-prev{left: 40px;}
    #other-content .other-set{flex-wrap: wrap;}
    #other-content .other-set .item{width: 100%;margin: 10px 0px;padding: 25px;}
    #aboutBox .about-info{width: 85%;}
    #aboutBox #youtube iframe{padding: 0px;}
}
@media screen and (min-width: 640px) and (max-width: 768px){
    #ssbanner .bxslider .ssbanner-item .photoCircle{width: 260px;height: 260px;}
}
@media screen and (max-width: 640px){
    #products .flex, #bookbox .flex{padding-bottom: 30px;}
    #products .btn, #bookbox .btn{padding-left: 0px;width: 100%;}
    #products .product-item .info{padding: 30px;}
    #other-content{padding-top: 70px;}
    #aboutBox .btn a{width: 70%;}
}
@media screen and (max-width: 540px){
    #products .product-item .info-content{top: 240px;}
}
@media screen and (max-width: 480px){
    #products .product-item .info .title{font-size: 20px;}
    #products .swiper-container::before{height: 115%;}
    #bookbox .book-item{min-width: auto;}
    #bookbox .book-bg::before{width: 55%;}
    #aboutBox .about-info{width: 90%;}
    #NPBox .news-item .info .date{display: block;}
    #products .product-item .info-content{top: 200px;}
}
@media screen and (max-width: 414px){
    #aboutBox .about-info h2{font-size: 32px;}
    #aboutBox .about-info span{font-size: 16px;}
    #ssbanner .bxslider .ssbanner-item .txt{padding: 15px;}
     
}
@media screen and (max-width: 400px){
    #products .product-item .info .title{font-size: 20px;}
    #products .product-item .info{padding: 15px;}
    #products .product-item .info .price{display: flex;}
}
@media screen and (max-width: 375px){
    #bookbox .swiper-button-prev{left: 25px;}
    #bookbox .swiper-button-next{left: 80px;}
    #ssbanner .bxslider .ssbanner-item .photoCircle{width: 250px;height: 250px;}
    #products .product-item .info-content{top: 180px;}
}






.fy-hero{
  --fy-text:#0b0c10;
  --fy-sub:rgba(11,12,16,.72);
  --fy-mute:rgba(11,12,16,.55);
  --fy-line:rgba(12,14,18,.10);

  --fy-a: 74, 116, 255;   /* 藍 */
  --fy-b: 255, 196, 92;   /* 金 */
  --fy-bg:#ffffff;

  position: relative;
  background: var(--fy-bg);
  padding: clamp(16px, 2.4vw, 28px) 0 clamp(18px, 3vw, 34px);
  overflow: hidden;
}

.fy-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 380px at 14% 10%, rgba(var(--fy-a), .16), transparent 62%),
    radial-gradient(920px 420px at 88% 18%, rgba(var(--fy-b), .16), transparent 60%),
    linear-gradient(transparent 31px, rgba(0,0,0,.03) 32px),
    linear-gradient(90deg, transparent 31px, rgba(0,0,0,.03) 32px);
  background-size:auto, auto, 32px 32px, 32px 32px;
  opacity: .9;
  pointer-events:none;
  mask-image: radial-gradient(65% 58% at 22% 18%, #000 0%, transparent 62%);
}

.fy-shell{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Hero Box */
.fy-heroBox{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(12px, 2vw, 18px);
  border: 1px solid var(--fy-line);
  border-radius: 22px;
  padding: clamp(16px, 2.2vw, 22px);
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.fy-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: .10em;
  color: rgba(11,12,16,.60);
  text-transform: uppercase;
}

.fy-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--fy-a), .95), rgba(var(--fy-b), .92));
  box-shadow: 0 0 0 6px rgba(var(--fy-a), .10);
}

.fy-h1{
  margin: 0 0 12px;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.10;
  color: var(--fy-text);
  font-size: clamp(30px, 3.6vw, 52px);
}

.fy-h1::selection{ background: rgba(var(--fy-b), .55); }

.fy-lead{
  margin: 0 0 14px;
  color: var(--fy-sub);
  line-height: 1.9;
  font-size: 16px;
  max-width: 74ch;
}

.fy-lead strong{
  color: var(--fy-text);
  font-weight: 900;
  background: linear-gradient(transparent 62%, rgba(var(--fy-b), .55) 0);
  padding: 0 .08em;
}

.fy-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}

.fy-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(12,14,18,.14);
  background: rgba(255,255,255,.85);
  color: rgba(12,14,18,.84);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fy-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--fy-a), .38);
  box-shadow: 0 16px 44px rgba(0,0,0,.10);
}

.fy-chip--dark{
  border-color: rgba(12,14,18,.18);
  background: linear-gradient(135deg, rgba(var(--fy-a), .16), rgba(var(--fy-b), .14));
}

.fy-note{
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--fy-line);
  color: var(--fy-mute);
  font-size: 12.5px;
  line-height: 1.7;
}

/* right metrics */
.fy-heroSide{
  display:grid;
  gap: 10px;
  align-content: start;
}

.fy-metric{
  border-radius: 18px;
  border: 1px solid rgba(12,14,18,.10);
  background: rgba(255,255,255,.70);
  padding: 14px 14px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.fy-metricN{
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fy-text);
  background: linear-gradient(135deg, rgba(var(--fy-a), .95), rgba(var(--fy-b), .92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fy-metricT{
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11,12,16,.58);
}

/* About */
.fy-about{
  margin-top: 14px;
  border: 1px solid var(--fy-line);
  border-radius: 22px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  padding: clamp(16px, 2.2vw, 22px);
}

.fy-aboutHead{
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fy-line);
  margin-bottom: 14px;
}

.fy-h2{
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 950;
  letter-spacing: -.01em;
  color: var(--fy-text);
}

.fy-p{
  margin: 0;
  color: var(--fy-sub);
  line-height: 1.9;
  font-size: 15px;
  max-width: 92ch;
}

.fy-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.fy-card{
  grid-column: span 6;
  border-radius: 18px;
  border: 1px solid rgba(12,14,18,.10);
  background: rgba(255,255,255,.86);
  padding: 16px;
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
}

.fy-cardT{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 950;
  color: var(--fy-text);
  letter-spacing: .01em;
}

.fy-p2{
  margin: 0 0 10px;
  color: var(--fy-sub);
  line-height: 1.85;
  font-size: 14px;
}

.fy-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,12,16,.76);
  line-height: 1.8;
  font-size: 14px;
}

.fy-miniTip{
  margin-top: 12px;
  border-top: 1px dashed rgba(12,14,18,.14);
  padding-top: 12px;
  color: rgba(11,12,16,.70);
  font-size: 13.5px;
  line-height: 1.8;
}

.fy-miniTip b{ color: var(--fy-text); font-weight: 950; }

.fy-badges{ display:flex; flex-wrap:wrap; gap: 8px; }

.fy-badge{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(var(--fy-a), .10);
  border: 1px solid rgba(var(--fy-a), .18);
  color: rgba(11,12,16,.78);
  font-size: 13px;
  font-weight: 950;
}

/* table */
.fy-table{
  border: 1px solid rgba(12,14,18,.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.90);
}

.fy-tr{
  display:grid;
  grid-template-columns: 1.05fr 1.45fr 1.2fr;
}

.fy-td{
  padding: 10px 12px;
  border-top: 1px solid rgba(12,14,18,.08);
  border-right: 1px solid rgba(12,14,18,.08);
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(11,12,16,.74);
}

.fy-tr .fy-td:last-child{ border-right: 0; }
.fy-th .fy-td{
  border-top: 0;
  font-weight: 950;
  color: rgba(11,12,16,.78);
  background: linear-gradient(135deg, rgba(var(--fy-a), .10), rgba(var(--fy-b), .10));
}

/* steps */
.fy-steps{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,12,16,.76);
  line-height: 1.85;
  font-size: 14px;
}
.fy-steps b{ color: var(--fy-text); font-weight: 950; }

/* CTA */
.fy-cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(12,14,18,.12);
  background: linear-gradient(135deg, rgba(var(--fy-a), .14), rgba(var(--fy-b), .12));
  color: rgba(11,12,16,.88);
  font-weight: 950;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fy-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0,0,0,.10);
}

/* FAQ */
.fy-faq{
  margin-top: 14px;
  border: 1px solid var(--fy-line);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  padding: clamp(16px, 2.2vw, 22px);
}

.fy-faqList{ margin-top: 10px; display:grid; gap: 10px; }

.fy-qa details{
  border-radius: 16px;
  border: 1px solid rgba(12,14,18,.10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 34px rgba(0,0,0,.05);
  overflow:hidden;
}

.fy-qa summary{
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 950;
  color: rgba(11,12,16,.86);
  list-style: none;
  position: relative;
}
.fy-qa summary::-webkit-details-marker{ display:none; }

.fy-qa summary::after{
  content:"+";
  position:absolute;
  right: 14px;
  top: 12px;
  width: 26px; height: 26px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(12,14,18,.12);
  background: rgba(255,255,255,.9);
  color: rgba(11,12,16,.70);
  font-weight: 950;
}

.fy-qa details[open] summary::after{ content:"–"; }

.fy-ans{
  padding: 0 14px 14px;
  color: rgba(11,12,16,.74);
  line-height: 1.9;
  font-size: 14px;
  border-top: 1px solid rgba(12,14,18,.08);
  background: linear-gradient(180deg, rgba(var(--fy-a), .05), transparent 55%);
}

.fy-foot{
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--fy-line);
  color: var(--fy-mute);
  font-size: 12.5px;
  line-height: 1.7;
}

/* =========================
   RWD
========================= */
@media (max-width: 980px){
  .fy-heroBox{ grid-template-columns: 1fr; }
  .fy-heroSide{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 920px){
  .fy-card{ grid-column: span 12; }
}

@media (max-width: 600px){
  .fy-shell{ width: min(1120px, calc(100% - 22px)); }
  .fy-heroSide{ grid-template-columns: 1fr; }
  .fy-tr{ grid-template-columns: 1fr; }
  .fy-td{ border-right: 0; }
  .fy-th .fy-td{ display:none; }
  .fy-tr{ border-top: 1px solid rgba(12,14,18,.08); }
  .fy-table .fy-tr:first-child{ border-top:0; }
}

@media (prefers-reduced-motion: reduce){
  .fy-chip, .fy-cta{ transition: none; }
}