/* header */
header #webmenu nav >ul >li >p a { color: var(--info); }
header.scroll { background: rgb(255 255 255/90%); }
#webmenu nav ul { display: flex; justify-content: flex-end; }
#webmenu nav ul.subOption { display: flex; flex-direction: column; }
/* search_box */
#openform { background: rgba(var(--white-rgb),.3); }
.wrapper * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#wrap { position: relative; z-index: 8; background-color: #faf8f3; }
/* section */
section { margin: 5vw 0 3vw; }
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 */
.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; content: ""; }
.bg_box.white:before { background: rgba(var(--white-rgb),.2); }
/*header_content*/
.header_content { text-align: center; padding: 60px 0 40px; display: flex; flex-direction: column; align-items: center; }
.header_content .main_title { font-size: 2.5rem; font-weight: 600; color: #030303; margin-bottom: 0; letter-spacing: 4px; line-height: 1.2; }
.header_content .sub_title { font-size: 1.125rem; color: var(--gray); letter-spacing: 0.5px; font-weight: 500; text-transform: uppercase; }
.webBox .header_content .pageh1 { position: relative; font-size: 1.2rem; font-weight: 400; word-spacing: 100vw; max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #5d5d5d; line-height: 1.5; margin: 20px auto; }
.header_content .line_showline { position: absolute; display: flex; flex-direction: column; align-items: center; top: -122px; }
.header_content .line_showline .lan_01 { width: 5px; height: 20px; background: #8b6826; }
.header_content .line_showline .lan_02 { width: 1px; height: 91px; background: #372708; }
/*more_btn_area*/
.more_btn_area { text-align: center; margin-top: 60px; display: flex; justify-content: center; align-items: center; position: relative; }
.more_btn_area .btn_wrap { position: relative; }
.more_btn_area .btn_wrap:before { content: ""; width: 70px; height: 1px; background: #dcdcdc; position: absolute; right: 77px; z-index: 3; }
.btn_wrap { display: flex; align-items: center; cursor: pointer; transition: all 0.3s ease; text-decoration: none; }
.btn_wrap span { font-size: 1rem; color: #555; margin-right: 44px; letter-spacing: 2px; padding: 20px; background: #f5efea; border-radius: 666px; padding: 28px 20px 28px 50px; font-weight: 600; width: 200px; }
.btn_wrap .circle_icon { width: 100px; height: 100px; background: linear-gradient(90deg,#b38564,#bf8c6a,#a47352); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; box-shadow: 0 4px 15px rgba(180,138,106,0.4); transition: transform 0.3s ease; }
.btn_wrap .circle_icon img { filter: brightness(66666); width: 16px; }
.btn_wrap:hover .circle_icon { transform: translateX(5px); }
/*slick-prev*/
#wrap .slick-prev,#wrap .slick-next { width: 40px; height: 40px; z-index: 10; transition: all 0.3s ease; background-size: contain; background-repeat: no-repeat; background-position: center; }
#wrap .slick-prev { left: -50px; background-image: url('/images/40/arrow-left.png'); }
#wrap .slick-next { right: -50px; background-image: url('/images/40/arrow-right.png'); }
#wrap .slick-prev:before,#wrap .slick-next:before { content: none; }
.coolJJ_box { position: absolute; left: 3vw; width: 33vw; height: 33vw; top: 6vw; background-color: rgb(247 210 97/50%); border-radius: 99999px; filter: blur(40px); animation: bounce 1s infinite; animation-duration: 10s; opacity: 0.5; z-index: 0; }
#about .inborder_box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size: 40px 40px; opacity: 0.3; z-index: -1; pointer-events: none; }
#about .inborder_box { width: min(1650px,100%); padding: 100px 20px 220px; border-radius: 60px; border: #616161 6px solid; overflow: hidden; background-image: url(/images/40/service_bg.jpg); }
.ball_boox { position: absolute; right: 12vw; top: -0.5vw; width: 3vw; z-index: 7; }
/* --- Keyframes (Multiline) --- */
@keyframes marquee-vertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes flowGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
@-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 floatSoft {
  0% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(3px,-6px) rotate(1deg); }
  50% { transform: translate(0px,-12px) rotate(0deg); }
  75% { transform: translate(-3px,-6px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
@keyframes floatSoft_fix {
  0% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(-3px,6px) rotate(-1deg); }
  50% { transform: translate(0px,12px) rotate(0deg); }
  75% { transform: translate(3px,6px) rotate(1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
/* --- Section Layout --- */
#about.t-about { position: relative; padding: 4rem 1.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0; }
#about .t-about__container { width: min(1200px,100%); margin: 0 auto; position: relative; padding: 0 1rem; z-index: 10; }
#about .t-about__detail { position: relative; z-index: 30; text-align: center; max-width: 500px; padding: 1rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#about .t-about__detail .logo-mark { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; }
#about .t-about__title,.t-about__text,#about .btn-primary,#about .t-about__head { display: none; }
#about .t-about__detail::before,#about .t-about__detail::after { content: ''; position: absolute; background: var(--info); opacity: 0.2; z-index: -1; }
#about .t-about__nav { position: relative; z-index: 10; width: 100%; }
#about .t-about-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
#about .about-card-wrap { perspective: 1500px; width: 100%; height: 390px; position: relative; cursor: pointer; }
#about .info-box { position: absolute; background-color: rgb(74 74 74/80%); color: var(--text-white); padding: 2.4rem 1.5rem; min-width: 240px; width: min(325px,100%); border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); display: flex; gap: 1rem; align-items: center; text-align: left; z-index: 60; pointer-events: none; transition: transform 0.3s ease; }
#about .info-box span.num { font-size: 0.9rem; opacity: 0.7; letter-spacing: 0.1em; font-weight: 600; }
#about .info-box .h4 { font-size: 1.3rem; font-weight: 600; line-height: 1.4; margin: 0; }
#about .deco-corner { position: absolute; width: 150px; height: 150px; border: 12px solid var(--accent-yellow); border-radius: 12px; z-index: 60; pointer-events: none; }
#about .about-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.34,1.56,0.64,1); background: var(--white); border-radius: 1.5rem; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05); }
#about .about-card-wrap:hover .about-card { box-shadow: 0px 20px 40px rgba(0,0,0,0.15); z-index: 50; border-color: var(--accent-yellow); }
#about .animation_uppbox { width: 100%; height: 100%; animation: floatSoft 5s linear infinite; will-change: transform; }
/* --- Card Faces --- */
#about .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 1.5rem; }
#about .card-front { background-color: var(--white); z-index: 2; display: flex; }
#about .card-front-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s; }
#about .up_img { position: absolute; width: 110%; bottom: 0; }
#about .card-back { color: var(--info); transform: rotateY(180deg); z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; text-align: center; background: linear-gradient(270deg,#eeb33c,#fcd320,#eeb33c); background-size: 400% 400%; animation: flowGlow 6s linear infinite; }
#about .card-back .h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 1rem; color: #302e29; }
#about .card-back p { font-weight: 600; line-height: 1.6; opacity: 0.95; color: #404040; }
/* --- Layout Logic (Desktop:Center Cluster) --- */
#about .info-box { bottom: 1.5rem; left: 1.5rem; right: 1.5rem; }
#about .info-box * { color: white; }
#about .deco-corner { top: 1rem; left: 1rem; border-right: none; border-bottom: none; }
/* --- Promise Section --- */
#pomise.t-promise { position: relative; padding: 0rem; display: flex; justify-content: center; align-items: center; margin: 0 0 50px; margin-top: -150px; }
#pomise .t-promise__container { width: 100%; max-width: var(--width-xxl); margin: 0 auto; padding: 0 1rem; z-index: 10; display: flex; justify-content: center; }
#pomise .promise-box { background: linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%); border-radius: 2.5rem; padding: 2.5rem 0rem; box-shadow: 0 20px 50px rgba(0,0,0,0.08); width: 100%; width: min(900px,100%); text-align: center; border: 1px solid rgba(255,255,255,0.8); }
#pomise .header_content { padding: 0; margin-bottom: 40px; }
#pomise .promise-header { margin-bottom: 3.5rem; }
#pomise .promise-header .h2 { font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem; letter-spacing: 0.05em; color: #1a1a1a; }
#pomise .promise-header p { font-size: 0.85rem; letter-spacing: 0.15em; color: #aaa; text-transform: uppercase; font-weight: 500; }
#pomise .promise-list { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2rem; padding: 0 1rem; }
#pomise .promise-item { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; flex: 1; min-width: 180px; }
#pomise .promise-num { width: 36px; height: 36px; background-color: #5c636a; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat',sans-serif; font-size: 0.85rem; font-weight: 600; }
#pomise .promise-text { font-weight: 800; color: #444; font-size: 1.1rem; letter-spacing: 0.02em; white-space: nowrap; }
/* --- Web Design Section (Carousel Updated) --- */
#web_design { position: relative; padding: 0rem 0rem; background-color: #faf8f3; margin: 0; }
#web_design .web-design-header { text-align: center; margin-bottom: 4rem; }
#web_design .web-design-header .wd-tag { font-size: 0.75rem; letter-spacing: 0.2em; color: #aaa; text-transform: uppercase; margin-bottom: 0.5rem; display: block; }
#web_design .web-design-header .wd-main-title { font-size: 3rem; font-weight: 900; margin-bottom: 1rem; color: var(--info); line-height: 1.2; }
#web_design .web-design-header .wd-desc { font-size: 1rem; color: #666; max-width: 600px; margin: 0 auto; line-height: 1.6; }
#web_design .wd-content-wrapper { display: flex; flex-direction: column; gap: 3rem; align-items: center; width: 100%; margin: 0 auto; padding: 0 0rem; }
#web_design .coolJJ_box { top: -11vw; left: auto; right: 19vw; width: 20vw; height: 20vw; z-index: 0; }
#web_design .t-wbgset { position: absolute; z-index: 0; width: 100%; top: 0; }
#web_design .t-wbgset .tmeitem01 { width: 11vw; position: relative; top: -11.5vw; }
#web_design .t-wbgset .tmeitem02 { right: 0; top: -18vw; position: absolute; width: 4.3vw; }
#web_design .t-wbgset .tmeitem03 { right: -13vw; top: 6vw; position: absolute; width: 28vw; }
/* Updated for Slick with Arrows */
#web_design .wd-text-col { flex: 1; padding-right: 0; max-width: 600px; width: 100%; padding: 50px; }
#web_design .wd-text-slider-window { width: 100%; position: relative; }
#web_design .wd-text-col:before {
  content:"";position:absolute;background:url("/images/40/big_car.png");width:56vw;left:-15vw;height:268px;/* aspect-ratio:265/66;*/
  background-size:cover;bottom:150px;background-size:contain;background-repeat:no-repeat;
}
#web_design .car_border { position: absolute; width: 48vw; left: -6vw; margin-bottom: 340px; background: #ffffff; border-radius: 0 50px 0 0; aspect-ratio: 81/32; z-index: 1; }
#web_design .car_border:before { content: ""; position: absolute; width: 500px; width: 25vw; height: 30px; left: 10vw; margin-top: -15px; background: #f7d261; }
/* Slider Track Padding for Arrows at Bottom */
#web_design .wd-text-slider-track { width: 100%; padding-bottom: 270px; }
#web_design .wd-text-slide { box-sizing: border-box; padding: 0 10px; outline: none; }
#web_design .wd-text-slide.slick-slide { opacity: 0; }
#web_design .wd-text-slide.slick-slide.slick-active { opacity: 1; }
#web_design .wd-yellow-bar { width: 100px; height: 8px; background-color: var(--accent-yellow); margin-bottom: 2rem; }
#web_design .wd-feature-title { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.3; color: var(--info); }
#web_design .wd-feature-desc { font-size: 1rem; color: #555; line-height: 1.8; margin-bottom: 1rem; white-space: pre-line; min-height: 120px; }
#web_design .wd-image-col { flex: 1.2; position: relative; min-height: 400px; width: 100%; }
#web_design .wd-image-placeholder { width: 100%; height: 100%; }
/* Custom Slick Arrow Styles */
#web_design .wd-slick-arrow { position: absolute; bottom: 0; width: 48px; height: 48px; border-radius: 50%; background-color: var(--info); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; z-index: 20; outline: none; }
#web_design .wd-slick-arrow img { filter: brightness(6666); padding: 3px; }
#web_design .wd-slick-arrow:hover { background-color: var(--accent-yellow); color: var(--info); }
#web_design .wd-slick-arrow svg { width: 24px; height: 24px; }
/* Position arrows at bottom left */
#web_design .wd-slick-prev { left: 10px; }
#web_design .wd-slick-next { left: 70px; }
/* Custom Slick Dots Styles (Lines) */
#web_design .wd-slick-dots { position: absolute; bottom: 20px; left: 130px; display: flex !important; padding: 0; margin: 0; list-style: none; z-index: 20; align-items: center; }
#web_design .wd-slick-dots li { margin: 0 4px; }
#web_design .wd-slick-dots li button { font-size: 0; line-height: 0; display: block; width: 30px; height: 4px; padding: 0; cursor: pointer; color: transparent; border: 0; outline: none; background: #ccc; transition: all 0.3s; border-radius: 2px; }
#web_design .wd-slick-dots li.slick-active button { width: 60px; background-color: var(--info); }
.co_titleimg { display: flex; flex-direction: column; align-items: center; padding: 6rem 0 0; width: 78vw; margin: 0 auto; }
/* --- Marketing Section Styles (New) --- */
#marketing { padding: 6rem 1.5rem; overflow: hidden; position: relative; margin: 0; }
#marketing .mk-header { text-align: center; margin-bottom: 4rem; position: relative; }
#marketing .mk-title-wrap { display: inline-flex; align-items: center; gap: 1rem; position: relative; }
#marketing .mk-title-wrap .mk-main-title::after { content: ""; display: block; width: 120px; height: 2px; background-color: #666; }
#marketing .mk-main-title { font-size: 2.5rem; font-weight: 800; color: var(--info); letter-spacing: 0.05em; display: flex; align-items: center; gap: 1rem; }
#marketing .mk-sub-title { font-size: 4.5rem; font-weight: 700; color: #b4b3b3; text-transform: uppercase; margin-left: 0.5rem; }
#marketing .mk-slider-container { max-width: 1300px; margin: 0 auto; padding: 0 1rem; }
#marketing .mk-slide {padding: 15px;position: relative;}
/* Gap between slides */
#marketing .mk-card {position: relative;background-color: white;border-radius: 0px;padding: 3rem 2rem;text-align: center;height: 100%;min-height: 400px;display: flex;flex-direction: column;align-items: center;transition: all 0.3s ease;box-shadow: 1px 3px 6px rgba(0,0,0,0.05);background-image: linear-gradient(rgb(229 229 229/40%) 1px,transparent 1px),linear-gradient(90deg,rgb(229 229 229/40%) 1px,transparent 1px);background-size: 40px 40px;cursor: pointer;border: 1px solid rgba(0,0,0,0.03);}
/* Number Circle */
#marketing .mk-num { width: 109px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: #596366; color: white; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat',sans-serif; margin-bottom: 2.5rem; transition: all 0.3s ease; }
#marketing .mk-card-title { font-size: 1.25rem; font-weight: 800; color: var(--info); margin-bottom: 1.5rem; line-height: 1.4; transition: color 0.3s; }
#marketing .mk-card-desc { font-size: 0.95rem; color: #666; line-height: 1.8; text-align: justify; transition: color 0.3s; }
/* Hover Effects - Yellow Style */
#marketing .mk-card:hover { transform: translateY(-10px); box-shadow: -15px 18px 0px rgb(242 201 76); }
#marketing .mk-card:hover .mk-num { background: #e2ae44; }
/* Slick Arrow Styling for Marketing */
#marketing .slick-prev,#marketing .slick-next { width: 60px; height: 60px; background-color: var(--info); border-radius: 50%; z-index: 10; }
#marketing .slick-prev:hover,#marketing .slick-next:hover { background-color: var(--accent-yellow); }
#marketing .slick-prev::before,#marketing .slick-next::before { opacity: 1; font-size: 24px; }
#marketing .slick-prev { left: -60px; display: none!important; }
#marketing .slick-next { right: -5vw; background-image: url('/images/40/arrow-right2.png'); padding: 10px; background-size: 15px; }
/* --- CaseJ Box Styles (New) --- */
#caseJ_box { position: relative; padding: 2rem 0 6rem 6rem; overflow: hidden; margin: 0; }
#caseJ_box .coolJJ_box { width: 26vw; height: 26vw; left: 26vw; top: 5vw; }
#caseJ_box .case-side-decoration { position: absolute; left: 7rem; top: 0; bottom: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; }
#caseJ_box .case-vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 4rem; font-weight: 500; color: #b4b3b3; letter-spacing: 0.1em; margin-bottom: 1rem; }
#caseJ_box .case-vertical-line { margin-top: -10rem; position: relative; display: flex; flex-direction: column; align-items: center; }
#caseJ_box .case-main-content { padding-left: 2rem; }
#caseJ_box .case-header-row { display: flex; justify-content: space-between; align-items: flex-end; padding-right: 12rem; padding-top: 5rem; width: 85%; position: relative; margin: 0px 0 2rem 12%; }
#caseJ_box .case-title-group { text-align: left; }
#caseJ_box .case-subtitle { font-size: 0.85rem; color: #999; letter-spacing: 0.1em; margin-bottom: 0.5rem; font-weight: 500; text-transform: uppercase; }
#caseJ_box .case-main-title { font-size: 2.5rem; font-weight: 900; color: var(--info); }
#caseJ_box .case-controls { display: flex; gap: 1rem; align-items: center; }
#caseJ_box .case-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; font-weight: 700; font-size: 0.9rem; z-index: 10; }
#caseJ_box .btn-phone { background-color: #D4AF37; }
#caseJ_box .case-controls a svg { padding: 10px; fill: white; }
/* Gold */
#caseJ_box .btn-line { background-color: #00C300; font-family: sans-serif; font-size: 0.7rem; }
/* LINE Green */
#caseJ_box .btn-prev,#caseJ_box .btn-next { background-color: var(--info); }
#caseJ_box .btn-prev img,#caseJ_box .btn-next img { filter: brightness(6666); padding: 2px; }
#caseJ_box .case-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
#caseJ_box .btn-prev svg,#caseJ_box .btn-next svg { width: 24px; height: 24px; }
#caseJ_box .case-slider-container { width: 100%; position: relative; margin-left: 11%; }
#caseJ_box .case-slider { width: 100%; }
#caseJ_box .case-slide { margin-right: 2rem; outline: none; }
#caseJ_box .case-slide img { width: 100%; border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: block; object-fit: cover; height: 500px; }
/*boo_box*/
.boo_box { display: flex; justify-content: flex-end; background: linear-gradient(180deg,#b38564,#bf8c6a,#a47352); }
#picture_fly { position: absolute; z-index: 9; left: -6vw; width: 16vw; top: -20vw; }
#picture_fly2 { position: absolute; z-index: 9; right: -11vw; width: 22vw; margin-top: 12vw; }
.flyup { z-index: 6; }
@media (min-width:1025px) {
  #about .about-card-wrap:hover .about-card { transform: rotateY(180deg); }
  #about .about-card-wrap:hover .card-front-img { transform: scale(1.1); }
  #about.t-about { padding: 1rem 2rem; overflow: visible; }
  #about .t-about__detail { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; }
  #about .t-about-list { grid-template-columns: repeat(2,1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
  #about .about-card-wrap:nth-child(1) .info-box { top: auto; left: auto; bottom: -0.5rem; right: -0.5rem; text-align: left; border-radius: 20px 0 0 0; }
  #about .about-card-wrap:nth-child(1) .deco-corner { top: -10px; left: -10px; border-right: none; border-bottom: none; }
  #about .about-card-wrap:nth-child(3) .up_img { left: -8%; }
  /* Card 2 (右上):文字框位置在左下 */
  #about .about-card-wrap:nth-child(2) .info-box { top: auto; right: auto; bottom: -0.5rem; left: -0.5rem; text-align: left; border-radius: 0 20px 0 0; }
  #about .about-card-wrap:nth-child(2) .deco-corner { top: -10px; right: -10px; border-left: none; border-bottom: none; }
  /* Card 3 (左下):文字框位置在右上 */
  #about .about-card-wrap:nth-child(3) .info-box { bottom: auto; left: auto; top: -0.5rem; right: -0.5rem; text-align: left; border-radius: 0 0 0 20px; }
  #about .about-card-wrap:nth-child(3) .deco-corner { bottom: -10px; left: -10px; border-right: none; border-top: none; }
  /* Card 4 (右下):文字框位置在左上 */
  #about .about-card-wrap:nth-child(4) .info-box { bottom: auto; right: auto; top: -0.5rem; left: -0.5rem; text-align: left; align-items: flex-start; border-radius: 0 0 20px 0; }
  #about .about-card-wrap:nth-child(4) .deco-corner { bottom: -10px; right: -10px; left: auto; top: auto; border-left: none; border-top: none; border-right: 12px solid var(--accent-yellow); border-bottom: 12px solid var(--accent-yellow); }
  /* 3D Hover Movement */
  #about .about-card-wrap:nth-child(1):hover .about-card { transform: translate(-30px,-30px) rotateY(180deg); }
  #about .about-card-wrap:nth-child(2):hover .about-card { transform: translate(30px,-30px) rotateY(180deg); }
  #about .about-card-wrap:nth-child(3):hover .about-card { transform: translate(-30px,30px) rotateY(180deg); }
  #about .about-card-wrap:nth-child(4):hover .about-card { transform: translate(30px,30px) rotateY(180deg); }
  /* Web Design Carousel Desktop Layout */
  #web_design .wd-content-wrapper { flex-direction: row; align-items: center; justify-content: flex-end; }
  #web_design .wd-text-col { padding-left: 0; position: absolute; left: 11vw; z-index: 5; }
  #web_design .wd-image-col { width: 69vw; flex: unset; margin-top: -100px; }
}
@media (max-width:1470px) {
  .header_content .main_title,#marketing .mk-main-title { font-size: 2.25rem; }
  #picture_fly { width: 15vw; left: -5vw; }
  #picture_fly2 { right: -10vw; width: 18vw; }
  #about .info-box { padding: 2rem 1.5rem; width: 310px; }
  #about .inborder_box { width: min(1200px,100%); }
  #about .t-about__container { padding: 0 1rem; width: min(980px,95%); }
  #about .about-card-wrap { height: 310px; }
  #about .info-box .h4 { font-size: 1.2rem; }
  #web_design .wd-text-col { left: 5vw; }
  #web_design .wd-text-col:before { width: 66vw; left: -15vw; height: 270px; bottom: 90px; }
  #web_design .car_border { margin-bottom: 288px; aspect-ratio: 81/34; }
  #web_design .wd-feature-title { font-size: 1.5rem; margin-bottom: 1rem; }
  #web_design .wd-text-slider-track { padding-bottom: 194px; }
  #web_design .wd-feature-desc { font-size: 0.95rem; }
  #marketing .mk-sub-title { font-size: 3.5rem; }
  #marketing { padding: 5rem 1.5rem; }
  #marketing .mk-header { margin-bottom: 2rem; }
  #marketing .mk-num { width: 87px; margin-bottom: 2rem; }
  #caseJ_box .case-header-row { padding-right: 6rem; }
}
@media (max-width:1280px) {
  /* header */
  header .menu { border-bottom: 1px rgba(var(--white-rgb),.2) solid; display: flex; justify-content: space-between; align-items: center; }
  header #webmenu nav >ul >li >p a { color: #ffffff; }
  header.scroll { background: rgb(255 255 255/90%); }
  #webmenu nav ul { display: flex; flex-direction: column; }
  #webmenu nav ul.subOption { display: flex; flex-direction: column; }
}
@media (max-width:1024px) {
  #about .about-card-wrap { height: 100%; display: flex; flex-direction: column; }
  #about .t-about__detail { width: 100%; max-width: 100%; position: absolute; border-radius: 0; display: none; }
  #about .card-face { position: relative; animation: none; }
  #about .animation_uppbox { animation: none; }
  #about .up_img img { width: 245px; }
  #about .up_img { display: flex; justify-content: flex-end; bottom: -14px; width: 100%; }
  #about .t-about-list { display: flex; flex-direction: column; gap: 80px; }
  #about .inborder_box { padding: 100px 20px 20px; }
  #about .info-box { position: relative; bottom: 0; left: 0; border-radius: 15px 0 0 15px; }
  #pomise.t-promise { margin-top: 0; margin-bottom: 40px; }
  #about .deco-corner { display: none; }
  #about .about-card,#about .card-face { border-radius: 0px 15px 15px 0; transform: rotateY(0deg); }
  #web_design .wd-text-col { position: relative; z-index: 6; width: 100%; max-width: 100%; left: 0; }
  #web_design .car_border { aspect-ratio: auto; left: 5vw; width: 65vw; height: 322px; }
  #web_design .wd-text-col:before { width: 90vw; left: 5vw; height: 198px; margin: 0; padding: 0; background-size: cover; }
  #web_design .wd-text-slider-track { left: 7vw; }
  #marketing .mk-sub-title { font-size: 2rem; }
  #caseJ_box .case-side-decoration { display: none; }
  #caseJ_box { padding: 0 0 30px; }
  #caseJ_box .case-main-content { padding-left: 0; }
  #caseJ_box .case-slider-container { margin-left: 0; width: 90%; margin: 0 auto; }
  #caseJ_box .case-slide img { height: auto; }
  #caseJ_box .case-slide { margin-right: 0; }
}
@media (max-width:768px) {
  .coolJJ_box { top: 20vw; }
  #about .up_img img { width: 192px; }
  #about .card-face { position: relative; transform: rotateY(0deg); }
  #pomise .promise-list { flex-direction: column; gap: 1.5rem; }
  #pomise .promise-item { flex-direction: row; justify-content: flex-start; padding-left: 15%; gap: 1.5rem; }
  #pomise .promise-header .h2 { font-size: 2rem; }
  #web_design .web-design-header .wd-main-title { font-size: 2.2rem; }
  #web_design .wd-feature-title { font-size: 1.6rem; }
  /* Mobile adjustment for dots */
  #web_design .wd-slick-next { left: 60px; }
  #web_design .wd-slick-dots { left: 120px; }
  /* Marketing Mobile */
  #marketing .mk-title-wrap { flex-direction: column; gap: 0.5rem; }
  #marketing .mk-title-wrap::before,#marketing .mk-title-wrap::after { display: none; }
  #marketing .mk-main-title { font-size: 1.5rem; }
  #marketing .mk-sub-title { font-size: 1rem; margin-left: 0; }
  #marketing .slick-prev,#marketing .slick-next { display: none !important; }
  .header_content .main_title,#marketing .mk-main-title,#caseJ_box .case-main-title { font-size: 1.75rem; text-align: center; letter-spacing: 0; }
  .header_content .sub_title { font-size: 15px; padding: 0 20px; }
  .seeJlist .img_scale { border-radius: 15px; }
  .seetitle p { font-size: 16px; }
  #wrap .slick-prev,#wrap .slick-next { width: 25px; height: 25px; }
  #wrap .slick-prev { left: -33px; }
  #wrap .slick-next { right: -33px; }
  .boo_box { display: none; }
  .webBox .header_content .pageh1 { font-size: 1rem; }
  #web_design .car_border { width: 90vw; }
  #web_design .wd-text-col:before { width: 100vw; }
  #caseJ_box .case-header-row { margin: 0 auto; width: 90vw; padding: 33px 0; }
}
@media screen and (max-width:640px) {
  .header_content .line_showline .lan_01 { background: white; height: 70px; width: 2px; }
  .header_content .line_showline .lan_02 { height: 40px; }
  .header_content { margin-bottom: 0; padding: 40px 0 30px; }
  .btn_wrap .circle_icon { width: 70px; height: 70px; }
  .btn_wrap span { padding: 20px 20px 20px 50px; font-weight: 700; font-size: 1.1rem; margin-right: 22px; }
  .more_btn_area .btn_wrap:before { right: 56px; }
  #about .card-back .h3 { font-size: 1.25rem; }
  #about .card-back p { font-size: 0.9rem; }
  #about.t-about { padding: 1rem 1.5rem; margin-bottom: 40px; }
  #about .about-card-wrap { display: flex; }
  #about .info-box { width: 100%; order: 0; border-radius: 0; }
  #about .about-card,#about .card-face { border-radius: 0; background: #f7d261; padding: 17px 10px; }
  #about .about-card { padding: 0; background: unset; }
  #about .up_img { position: relative; bottom: 0; display: flex; flex-direction: column; align-items: center; }
  #about .up_img img { width: 93%; }
  #about .t-about-list { gap: 20px; }
  #about .inborder_box { border: #616161 3px solid; padding: 28px 0px; border-radius: 15px; }
  .ball_boox,#picture_fly,#picture_fly2 { display: none; }
  #marketing { padding: 3rem 1.5rem; }
  #web_design .wd-slick-prev { left: auto; right: 22vw; bottom: 150px; }
  #web_design .wd-slick-next { left: auto; right: 9vw; bottom: 150px; }
  #web_design .wd-slick-dots { display: none!important; }
  #web_design .wd-image-col { display: none; }
  #web_design .wd-text-slider-track { left: 2vw; }
  .co_titleimg { padding: 0; }
  #pomise .promise-box { border-radius: 15px; width: 95%; }
  #caseJ_box .case-btn { width: 40px; height: 40px; padding: 9px; }
  #caseJ_box .case-controls a svg { padding: 0; }
  #caseJ_box .btn-prev img,#caseJ_box .btn-next img { padding: 6px; }
}
@media screen and (max-width:480px) {
  #marketing .mk-slider-container { padding: 0; }
  #web_design .wd-feature-title { font-size: 1.4rem; }
  #web_design .wd-text-col { padding: 57px 29px; }
  #caseJ_box .case-controls { gap: 10px; }
  #marketing .mk-card { padding: 2rem 1rem; min-height: 350px; display: flex; justify-content: center; }
  #marketing .mk-title-wrap .mk-main-title::after { display: none; }
}