@charset "utf-8";

/*common.css로 옮길 예정*/
.wh-area{color:#fff !important;}


/******************sub.css로 옮길 예정******************/


/*서브페이지>상단 배너 공통*/
.sub-top-bn-com{position:relative;width:100%;height:756px;}
.sub-top-bn-com .con-txt{position:absolute;width:100%;}
.sub-top-bn-com .con-txt p {word-break: keep-all}

/*more 리스트*/
.more-com-lst>.con-flex{gap:35px;align-items: stretch;}
.more-com-lst .more-bx{width:calc((100% - 110px) / 4);}
.more-com-lst .more-bx .con-img{width:100%;aspect-ratio: 298 / 195;}
.more-com-lst .more-bx .con-txt{padding:20px 0;line-height:1.5;}
.more-com-lst .more-bx .con-txt h4{font-size:var(--font18); line-height: 1.5; font-weight: 600}
.more-com-lst .more-bx .con-txt p {font-size:var(--font16);margin:10px 0 20px; line-height: 1.5}
.more-com-lst .more-bx .con-txt a.go-more-btn{display:block;font-size:var(--font14); font-weight:700; line-height: 1}
.more-com-lst .more-bx .con-txt a.go-more-btn span {font-weight:600;}

/***** BRAND ************************************************/

/* #brand .sec01 .inner {display: flex; align-items: flex-start;} */
#brand .sec01 .inner .sub-page-tit {text-align: left; flex-shrink: 0; padding: 0}
#brand .sec01 .inner .sub-page-tit .txt {margin-top:var(--gap-md); line-height: 2}
#brand .sec01 .inner .sub-page-tit .btn_wrap {margin-top:var(--gap-md)}
/* #brand .sec01 .inner .sub-page-tit .btn_wrap .btn {height: 30px;font-size: var(--font12);} */
#brand .sec01 .con-in{width:100%;padding:50px;margin-top:20px;aspect-ratio: 1300 / 465;background:url(../../img/pages/company/cover/brand_cover_top.jpg) no-repeat center center / cover;}
#brand .sec01 .con-in p{line-height:1.7;}
#brand .sec01 .con-in .btn_wrap .btn{margin-top:15px;font-size:var(--font12);height:30px;}

/***** About ************************************************/

/*cover*/
.ex_list {display: flex; flex-direction: column; gap:40px}
.ex_list .list {position: relative; display: flex; align-items: center; width: 100%; aspect-ratio: 1300 / 384;}
.ex_list .list.studio {background:url('../../img/pages/buying/guide/bg_ex01.jpg') no-repeat center center / cover;}
.ex_list .list.gallery {background:url('../../img/pages/buying/guide/bg_ex02.jpg') no-repeat center center / cover;}
.ex_list .list.bespoke {background:url('../../img/pages/buying/guide/bg_ex03.jpg') no-repeat center center / cover;}
.ex_list .list.service {background:url('../../img/pages/buying/cover/bg_ex01.jpg') no-repeat center center / cover;}
.ex_list .list.showroom {background:url('../../img/pages/buying/cover/bg_ex02.jpg') no-repeat center center / cover;}
.ex_list .list.cn_gallery {background:url('../../img/pages/buying/cover/bg_ex03.jpg') no-repeat center center / cover;}
.ex_list .list.ci {background:url('../../img/pages/company/cover/bg_ex01.jpg') no-repeat center center / cover;}
.ex_list .list.smartcontl {background:url('../../img/pages/company/cover/bg_ex02.jpg') no-repeat center center / cover;}
.ex_list .list.ordersys {background:url('../../img/pages/company/cover/bg_ex03.jpg') no-repeat center center / cover;}

.ex_list .list .txt {color: #fff; margin-left: 75px}
.ex_list .list .txt dt {font-size: var(--font25); margin-bottom: 5px; font-weight: 600}
.ex_list .list .txt .btn_wrap {margin-top: 20px}
.ex_list .list .txt .btn_wrap .btn {height: 30px; font-size: var(--font12); border-radius: 0; border-color: #fff}


/*welcome*/
#welcome .sec01{background:url('../../img/pages/company/about/welcome_sec01_img.jpg') no-repeat center center / cover;}
#welcome .sec01 .con-txt{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:28px;line-height:1.5; color: #fff}

#welcome .sec02 .inner{gap:96px;align-items: stretch;}
#welcome .sec02 .con-l{width:614px;}
#welcome .sec02 .con-l .con-img{width:100%;aspect-ratio: 614 / 430;background:url('../../img/pages/company/about/welcome_sec02_img.jpg') no-repeat center center / cover;}
#welcome .sec02 .con-r{width:calc(100% - 710px);line-height:2;}
#welcome .sec02 .con-r p span{position:relative;}
#welcome .sec02 .con-r p span::after{content:'';position:absolute;bottom:-180%;left:70%;width:141px;aspect-ratio: 141 / 52;background:url('../../img/pages/company/about/welcome_sign.svg') no-repeat center center / contain;}
#welcome .sec02 .con-r p span strong{font-weight:700;}

.more-com-lst.company .more-bx1 .con-img{background:url('../../img/pages/company/company_more_lst1.jpg') no-repeat center center / cover;}
.more-com-lst.company .more-bx2 .con-img{background:url('../../img/pages/company/company_more_lst2.jpg') no-repeat center center / cover;}
.more-com-lst.company .more-bx3 .con-img{background:url('../../img/pages/company/company_more_lst3.jpg') no-repeat center center / cover;}
.more-com-lst.company .more-bx4 .con-img{background:url('../../img/pages/company/company_more_lst4.jpg') no-repeat center center / cover;}

/*philosophy*/
#philosophy .sub-top-bn-com{height:calc(100dvh - 84px)}
#philosophy .sec01{background:url('../../img/pages/company/about/philosophy_sec01_img.jpg') no-repeat center center / cover;}
#philosophy .sec02{background:url('../../img/pages/company/about/philosophy_sec02_img.jpg') no-repeat center center / cover;}
#philosophy .sec03{background:url('../../img/pages/company/about/philosophy_sec03_img.jpg') no-repeat center center / cover;}
#philosophy .sub-top-bn-com .con-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--font20);line-height:1.5;}
#philosophy .sub-top-bn-com .con-txt h3{margin-bottom:20px;}

/*history*/
#history {background: #364048; background: linear-gradient(0deg, rgba(54, 64, 72, 1) 0%, rgba(0, 0, 0, 1) 100%);}
#history .menu-dep3-tab {background: #000}
#history .menu-dep3-tab .menu-dep3-tit,
#history .menu-dep3-tab li.active a,
#history .sub-page-tit h2,
#history .sub-page-tit p {color: #fff}
#history .menu-dep3-tab li.active::after {background: #fff}

#history .sec01 {margin-bottom:var(--gap-lg); color: #fff}
#history .sec01 .con-img{width:100%;aspect-ratio: 1300 / 507;background:url('../../img/pages/company/about/history_sec01_img.jpg') no-repeat center center / cover;}

#history .sec02{margin:var(--gap-lg) 0;}
#history .sec02 .year-bx{position:relative;align-items: stretch; color: #fff}
#history .sec02 .year-bx:not(:last-child)::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:100%;background:#fff;}
#history .sec02 .year-bx:nth-child(2n){flex-direction: row-reverse;}
#history .sec02 .year-bx>div{width:50%;}
#history .sec02 .year-bx .year-txt{position:relative;width:50%;padding-left:40px;font-size:var(--font20);}
#history .sec02 .year-bx .year-txt h4{margin-bottom:10px;font-size:var(--font32);font-weight:800;}
#history .sec02 .year-bx:nth-child(2n+1) .year-txt{text-align: right;padding-left:0;padding-right:40px;}
#history .sec02 .year-bx .year-txt ul{line-height:1.8;}
#history .sec02 .year-bx .year-img{position:relative;padding-left:40px;}
#history .sec02 .year-bx:nth-child(2n) .year-img{padding-left:0;padding-right:40px;}
#history .sec02 .year-bx .year-img img{width:100%;}
#history .sec02 .year-bx:nth-child(2n) .year-txt ul span{display:inline-block;margin-left:20px;}
#history .sec02 .year-bx:not(:last-child){padding-bottom:var(--gap-lg);}
#history .sec02 .year-bx .year-txt-bx:not(:last-child){margin-bottom:20px;}
#history .sec02 .year-bx .year-txt::after{content:'';position:absolute;top:0;right:-8px;width:17px;height:17px;background:#000;border:1px solid #fff;border-radius:50%;}
#history .sec02 .year-bx:nth-child(2n) .year-txt::after{right:auto;left:-8px;}

#history .sec03 {background: #2C343B; color: #fff}
#history .sub-con-tit h3 {color: #fff}

/*ci*/
#ci .sub-top-bn-com{height:644px;}
#ci .sub-page-tit img{width:50%;max-width:780px;margin:auto;}
#ci .sec01{background:url('../../img/pages/company/about/ci_sec01_img.jpg') no-repeat center center / cover;}
#ci .sec02{background:url('../../img/pages/company/about/ci_sec02_img.jpg') no-repeat center center / cover;}
#ci .sec03{background:url('../../img/pages/company/about/ci_sec03_img.jpg') no-repeat center center / cover;}
#ci .sub-top-bn-com .con-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--font16);line-height:1.5;}
#ci .sub-top-bn-com .con-txt h3{margin-bottom:10px;font-size:var(--font32);font-weight:500;}

#ci .sec00 .con-in{width:100%;padding:var(--gap-lg) 20px;background:url(../../img/pages/company/about/ci_sec00_con_bg.jpg);margin-bottom:var( --gap-lg);border:2px solid #eaeaea;}
#ci .sec00 .con-in h3{font-size:var(--font45);margin:50px 0 15px;font-weight:600;}
#ci .sec00 .con-in p{line-height:1.7;}
#ci .sec00 .con-in{margin-bottom:var(--gap-lg)}
#ci .sec00 .con-in img{width:60%;max-width:440px;} 

/***** Skill ************************************************/

/* 맞춤자동차 제작 */
#ordersys .sec01 {background:url('../../img/pages/company/skill/odersys_sec01_img.jpg') no-repeat center center / cover;}
#ordersys .sec02 .con-txt {line-height: 2; font-size: var(--font20); margin-bottom: var(--gap-lg)}
#ordersys .sec03 .con-txt {line-height: 2; font-size: var(--font20)}
#ordersys .sec04 .con-txt {line-height: 2; font-size: var(--font20); margin-top: var(--gap-md)}
#ordersys .sec04 .thumb_list {gap: 20px; margin-top: var(--gap-md)}
#ordersys .sec04 .thumb_list p {width: calc(100% / 3)}
#ordersys .btn_wrap {text-align: center; margin-top: var(--gap-md)}
#ordersys .sec05 {background: #f5f5f5}

/* 통합 제어 시스템 */
#smartcontl .sec01{background:url('../../img/pages/company/skill/smartcontl_sec01_img.jpg') no-repeat center center / cover;}
#smartcontl .sec01 .con-txt{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:35px; letter-spacing: -.04em; font-weight: bold; color: #fff}
#smartcontl .sec02{background:url('../../img/pages/company/skill/smartcontl_sec02_img.jpg') no-repeat center center / cover;}
#smartcontl .sec02 .con-txt{font-size:var(--font18);line-height:2;}
#smartcontl .sec02 .con-txt h3 {font-weight: bold; font-size: 30px; line-height: 1.2}
#smartcontl .sec02 .con-txt p {margin-top:30px}
#smartcontl .sec02 .pic {margin-top: var(--gap-sub); text-align: center; padding: 0 16px}
#smartcontl .sec02 .pic img {width: 100%;max-width:1500px;}
#smartcontl .sec04 {background: #f5f5f5}

/* 디자인 */
#design .sec01 {background:url('../../img/pages/company/skill/design_sec01_img.jpg') no-repeat center center / cover;}
#design .sec01 .con-txt{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:35px; letter-spacing: -.04em; font-weight: bold; color: #fff}

#design .sec02 .con-txt {line-height: 2; font-size: var(--font20);}
#design .sec02 .con-txt strong {font-size: var(--font25); font-weight: 700}
#design .sec02 .img_wrap {position: relative; width: 100%;
	aspect-ratio: 1300 / 680; background:url('../../img/pages/company/skill/design_img_life.jpg') no-repeat center center / cover; margin-top: var(--gap-md)}
#design .sec02 .img_wrap .con-txt {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:35px; line-height: 1.3; letter-spacing: -.04em; font-weight: bold; color: #fff}

#design .sec03 {background: #F5F5F5}
#design .sec03 .con-txt {line-height: 2; font-size: var(--font20); margin-top: var(--gap-md)}
#design .sec03 .con-txt strong {font-weight: bold}
.seat_full {display: flex; align-items: center; gap: 27px}
.seat_full li {width: 50%; height: 30vw}
.seat_full li.left {background:url('../../img/pages/company/skill/design_img_seat01.jpg') no-repeat center center / cover;}

.seat_full li.right {background:url('../../img/pages/company/skill/design_img_seat02.jpg') no-repeat center center / cover;}
#design .sec04 {background:url('../../img/pages/company/skill/design_sec04_img.jpg') no-repeat center center / cover;}
#design .sec04 .con-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--font20); line-height: 2; color: #fff}

#design .sec05 {background: #F5F5F5}
.feature_list {}
.feature_list .con-flex {gap:20px}
.feature_list .feature-bx {width: calc(100% / 3); background: #fff; border: 1px solid #C5C4C2}
.feature_list .feature-bx .con-img  {width: 100%; aspect-ratio: 418 / 255;}
.feature_list .feature-bx .con-txt {padding: 20px; height: 200px; font-size: var(--font16); line-height: 1.5}
.feature_list .feature-bx .con-txt h4 {font-weight: bold; margin-bottom: 5px}
.feature-bx1 .con-img{background:url('../../img/pages/company/skill/design_img_feature01.jpg') no-repeat center center / cover;}
.feature-bx2 .con-img{background:url('../../img/pages/company/skill/design_img_feature02.jpg') no-repeat center center / cover;}
.feature-bx3 .con-img{background:url('../../img/pages/company/skill/design_img_feature03.jpg') no-repeat center center / cover;}
.feature-bx4 .con-img{background:url('../../img/pages/company/skill/design_sec10_img01.jpg') no-repeat center center / cover;}
.feature-bx5 .con-img{background:url('../../img/pages/company/skill/design_sec10_img02.jpg') no-repeat center center / cover;}
.feature-bx6 .con-img{background:url('../../img/pages/company/skill/design_sec10_img03.jpg') no-repeat center center / cover;}

#design .sec06 .btn_wrap {text-align: center; margin-top: var(--gap-md)}
.pack_list {}
.pack_list .con-flex {gap:20px; flex-wrap: wrap; justify-content: center}
.pack_list .pack-bx {width: calc(100% / 3 - 14px);}
.pack_list .pack-bx .con-img  {width: 100%; aspect-ratio: 420 / 255;}
.pack_list .pack-bx .con-txt {text-align: center; font-size: var(--font12); line-height: 1.5; padding: 20px 0}
.pack_list .pack-bx .con-txt strong {display: block; font-weight: 700; font-size: var(--font14)}
.pack_list .pack-bx .con-txt h4 {font-weight: bold; margin-bottom: 5px}
.pack-bx1 .con-img{background:url('../../img/pages/company/skill/design_img_pack01.jpg') no-repeat center center / cover;}
.pack-bx2 .con-img{background:url('../../img/pages/company/skill/design_img_pack02.jpg') no-repeat center center / cover;}
.pack-bx3 .con-img{background:url('../../img/pages/company/skill/design_img_pack03.jpg') no-repeat center center / cover;}
.pack-bx4 .con-img{background:url('../../img/pages/company/skill/design_img_pack04.jpg') no-repeat center center / cover;}
.pack-bx5 .con-img{background:url('../../img/pages/company/skill/design_img_pack05.jpg') no-repeat center center / cover;}
.pack-bx6 .con-img{background:url('../../img/pages/company/skill/design_img_pack06.jpg') no-repeat center center / cover;}

#design .sec07 {background:url('../../img/pages/company/skill/design_sec07_img.jpg') no-repeat center center / cover;}
#design .sec07 .con-txt{position:absolute;bottom:100px;left:50%;transform:translate(-50%,0);font-size:var(--font20); line-height: 2; color: #fff}
#design .sec07 .con-txt strong {font-weight: bold; font-size:var(--font25);}

#design .sec_pack {}
#design .sec_pack .btn_wrap {margin-top: 20px}
#design .sec_pack .btn_wrap .btn {height: 30px; font-size: var(--font12)}
.pack_detail {}
.pack_detail .con-flex {gap:var(--gap-md); align-items: flex-start}
.pack_detail .detail-bx {width:50%}
.pack_detail .detail-bx .con-img  {width: 100%; aspect-ratio: 640 / 365}
.pack_detail .detail-bx .con-txt {font-size: var(--font14); line-height: 1.5; padding: 20px 0 50px}
.pack_detail .detail-bx .con-txt h4 {font-weight: bold; margin-bottom: 5px}
.detail-bx1 .con-img{background:url('../../img/pages/company/skill/design_sec07_img01.jpg') no-repeat center center / cover;}
.detail-bx2 .con-img{background:url('../../img/pages/company/skill/design_sec07_img02.jpg') no-repeat center center / cover;}
.detail-bx3 .con-img{background:url('../../img/pages/company/skill/design_sec08_img01.jpg') no-repeat center center / cover;}
.detail-bx4 .con-img{background:url('../../img/pages/company/skill/design_sec08_img02.jpg') no-repeat center center / cover;}
.detail-bx5 .con-img{background:url('../../img/pages/company/skill/design_sec09_img01.jpg') no-repeat center center / cover;}
.detail-bx6 .con-img{background:url('../../img/pages/company/skill/design_sec09_img02.jpg') no-repeat center center / cover;}
.detail-bx7 .con-img{background:url('../../img/pages/company/skill/design_sec10_img01.jpg') no-repeat center center / cover;}
.detail-bx8 .con-img{background:url('../../img/pages/company/skill/design_sec10_img02.jpg') no-repeat center center / cover;}

#design .sec08 {background:url('../../img/pages/company/skill/design_sec08_img.jpg') no-repeat center center / cover;}
#design .sec08 .con-txt{position:absolute;bottom:100px;left:50%;transform:translate(-50%,0);font-size:var(--font20); line-height: 2; color: #fff}
#design .sec08 .con-txt strong {font-weight: bold; font-size:var(--font25);; line-height: 1.3}

#design .sec09 {background:url('../../img/pages/company/skill/design_sec09_img.jpg') no-repeat center center / cover;}
#design .sec09 .con-txt{position:absolute;bottom:100px;left:50%;transform:translate(-50%,0);font-size:var(--font20); line-height: 2; color: #fff}
#design .sec09 .con-txt strong {font-weight: bold; font-size:var(--font25);}

#design .sec10 {background:url('../../img/pages/company/skill/design_sec10_img.jpg') no-repeat center center / cover;}
#design .sec10 .con-txt{position:absolute;bottom:100px;left:50%;transform:translate(-50%,0);font-size:var(--font20); line-height: 2; color: #fff}
#design .sec10 .con-txt strong {font-weight: bold; font-size:var(--font25);}
#design .sec10 .con-txt .btn_wrap {margin: 20px 0 0}
#design .sec10 .con-txt .btn {border-color: #fff; height: 30px; font-size: var(--font12)}

#design .sec11 {background-color: #F5F5F5}
.sub-com .pd-lg.pb_long {padding-bottom: 200px;}

/* 대외평가 */
#trust .sec01 {background:url('../../img/pages/company/skill/trust_sec01_img.jpg') no-repeat center center / cover;}
#trust .sec01 .con-txt{position:absolute;bottom:100px;left:50%;transform:translate(-50%,0);font-size:35px; letter-spacing: -.04em; font-weight: bold; color: #fff}

.leaf_list {display: flex; justify-content: space-between; gap:60px}
.leaf_list li {display:inline-flex; align-items: center; justify-content: center; text-align: center; width: 100%; aspect-ratio: 266 / 190; background:url('../../img/pages/company/skill/bg_leaf.png') no-repeat center center; background-size: contain; font-size: 27px; font-weight: bold; padding-top: 20px; letter-spacing: -.03em}

#trust .sec03 {background: #F5F5F5}
#trust .sec03 .con-txt {font-size: var(--font20); line-height: 2; }
#trust .sec03 .img_wrap {margin-top: var(--gap-md)}

/* 서비스 */
#service .sec01 {background:url('../../img/pages/company/skill/service_sec01_img.jpg') no-repeat center center / cover;}
#service .sec01 .con-txt{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);font-size:35px; letter-spacing: -.04em; font-weight: bold; color: var(--bk)}
#service .sec02 .con-txt {font-size: var(--font20); line-height: 2; }
#service .sec03 {background: #333333; text-align: center; padding-bottom: 280px}
#service .sec03 .logo {margin-bottom: var(--gap-lg)}
#service .sec03 .pic_list {display: flex; gap: 20px}
#service .sec03 .pic_list .pic {width: calc(100% / 3); height: 240px}
#service .sec03 .pic_list .pic.pic01 {background:url('../../img/pages/company/skill/service_img01.jpg') no-repeat center center / cover;}
#service .sec03 .pic_list .pic.pic02 {background:url('../../img/pages/company/skill/service_img02.jpg') no-repeat center center / cover;}
#service .sec03 .pic_list .pic.pic03 {background:url('../../img/pages/company/skill/service_img03.jpg') no-repeat center center / cover;}

#service .sec04 {background: #fff; max-width: 1500px; margin: -150px auto 0}
#service .sec04 .how_list {margin-top: var(--gap-lg)}
.how_list {display: flex; gap: var(--gap-lg)}
.how_list li {width: calc(100% / 3)}
.how_list .box {position: relative; border: 1px solid #231F20; padding: 30px; height: 100%;}
.how_list .box strong {font-weight: bold; font-size: 27px; line-height: 1}
.how_list .box dl {display: block; border-top:1px solid #231F20; padding-top: 30px; margin-top: 30px; line-height: 1.5; letter-spacing: -.03em}
.how_list .box dt {font-weight: bold}
.how_list .box dd {margin-top: 30px}
.how_list .box:after {
	content: '';
	position: absolute;
	right: -25px;
	display: block;
	top: 50%;
	margin-top: -25px;
	width: 50px;
	height: 50px;
	background: #fff;
	border-top:1px solid #231F20;
	border-right:1px solid #231F20;
	transform:rotateZ(45deg);
}
.how_list li:last-child .box:after {display: none}
#service .sec05 {position: relative; height: 900px; background:url('../../img/pages/company/skill/service_sec05_img.jpg') no-repeat center center / cover;}
#service .sec05 .con-txt {position:absolute;top:50%;left:50%;transform:translate(0,-50%); letter-spacing: -.04em; color: #fff; line-height: 2; font-size: var(--font20); margin-left: 100px}
#service .sec05 .con-txt h4 {font-weight: bold; font-size: var(--font32)}
#service .sec05 .btn_wrap {margin-top: var(--gap-md)}
#service .sec05 .btn {border-color: #fff; height: 30px; font-size: var(--font12)}

.btn_wrap .btn {border-color: var(--bk); border-radius: 0}

/* #service .sub-page-tit p{font-size:var(--font32);} */

#design .sec03 .con-img{width:87%;max-width:817px;margin:0 auto 30px;aspect-ratio: 817 / 520;background:url('../../img/pages/company/skill/design_sec03_img.jpg') no-repeat center center / cover;}

#design .sub-con-tit p{font-size:var(--font20);}


#history.sub-com .menu-dep2-tab li.active{background:#000;color:#fff;}
#history.sub-com.sub-com .menu-dep2-tab li.active a{background:#000;color:#fff;}
#history.sub-com .menu-dep2-tab li.active::before{background:url('../../img/common/tab_deco_bk.png') no-repeat center center / contain;}
#history.sub-com .menu-dep2-tab li.active::after{background:url('../../img/common/tab_deco_bk.png') no-repeat center center / contain;}
#history.sub-com .menu-dep2-tab li:hover{background:#000;color:#fff;}
#history.sub-com .menu-dep2-tab li:hover a{background:#000;color:#fff;}
#history.sub-com .menu-dep2-tab li:hover::before{background:url('../../img/common/tab_deco_bk.png') no-repeat center center / contain;}
#history.sub-com .menu-dep2-tab li:hover::after{background:url('../../img/common/tab_deco_bk.png') no-repeat center center / contain;}


@media screen and (max-width:1500px){
	#service .sec04 {margin: 0 auto}
	#service .sec03 {padding: var(--gap-lg) 0;}
}
	
@media screen and (max-width:1400px){

	/**/
	#service .sec03 .pic_list .pic {height: 17vw}
	.how_list {gap:40px}
	.how_list .box:after {width: 30px; height: 30px; margin-top: -15px; right: -15px}
	
}
	
@media screen and (max-width:1280px){


	.sub-top-bn-com {height: 45vw}
	.more-com-lst>.con-flex {gap: 20px}
	.more-com-lst .more-bx {width: 25%}

	#smartcontl .sec01 .con-txt,
	#design .sec01 .con-txt,
	#trust .sec01 .con-txt,
	#service .sec01 .con-txt {font-size: var(--font32); top:20%}
	#service .sec05 {height: 65vw}
	
	.leaf_list {gap:30px}
	.leaf_list li {font-size: 2vw}
	
	#welcome .sec02 .inner {gap: 40px}
	#welcome .sec02 .con-l,
	#welcome .sec02 .con-r {width: 50%}
	#welcome .sec01 .con-txt {font-size: var(--font22)}
		
	#philosophy .sub-top-bn-com {height: 50vw}
	
	#design .sec07 .con-txt,
	#design .sec08 .con-txt,
	#design .sec09 .con-txt,
	#design .sec10 .con-txt {bottom:100px;}
}

@media screen and (max-width:768px){
	.more-com-lst>.con-flex {flex-wrap: wrap;gap: 16px}
	.more-com-lst .more-bx {width: 50%; flex: 1 1 40%;}
	
	.sub-top-bn-com {height: 60vw}
	.sub-com .sub-page-tit h2 {font-size: var(--font45)}
	.leaf_list {flex-wrap: wrap; margin: 0 var(--gap-sub)}
	.leaf_list li {flex: 1 1 40%; font-size: 4vw}
	#design .sec02 .img_wrap .con-txt {font-size: var(--font25)}
	#service .sec03 .logo img {width: 60vw}
	.how_list {flex-direction: column}
	.how_list li {width: 100%}
	.how_list .box:after {display: none}
	/* #service .sec05 {height: 90vw}
	#service .sec05 .con-txt {margin: 0; padding-right: 20px} */
	
	#welcome .sec02 .inner {flex-direction: column}
	#welcome .sec02 .con-l, #welcome .sec02 .con-r {width: 100%}
	
	#ci .sub-top-bn-com {height: 70vw}
	#smartcontl .sec02 .con-txt h3 {font-size: var(--font25)}
	
	/* #brand .sec01 .inner {flex-direction: column} */
	
	.ex_list .list {aspect-ratio: 16 / 7;}
	.ex_list .list .txt {margin-left: 40px}
	#service .sec05{display:flex;padding:20px 0 var(--gap-lg);flex-direction: column;height:auto;background:url('../../img/pages/company/skill/service_sec05_m_bg.jpg') no-repeat center / cover;}
	#service .sec05 .con-txt{position:relative;top:-50px;left:auto;right:auto;bottom:auto;transform:none;padding:0 20px;text-align: center !important;margin:0;}
	#service .sec05 img{width:100%;}
	#brand .sec01 .con-in{aspect-ratio: 1/1.5;padding:20px;}

	/* #service .sub-page-tit p{font-size:20px;} */
}

@media screen and (max-width:500px){
	
	.sub-com .sub-con-tit h3 {font-size: 22px}
	.sub-top-bn-com {height: 80vw}
	.leaf_list {margin: 0 20px}
	.leaf_list li {font-size: 3.2vw}
	#ordersys .sec04 .thumb_list {gap: 10px}
	
	.seat_full {gap: 10px}
	#design .sec04 .con-txt {line-height: 1.5}
	#design .sec07 .con-txt,
	#design .sec08 .con-txt,
	#design .sec09 .con-txt,
	#design .sec10 .con-txt {bottom:50px; padding: 0 40px; line-height: 1.5; word-break: keep-all}
	
	#smartcontl .sec01 .con-txt, #design .sec01 .con-txt, #trust .sec01 .con-txt, #service .sec01 .con-txt {top:35%; padding: 0 40px; line-height: 1.5; word-break: keep-all}
	
	#service .sec03 .logo img {width: 80vw}
	#service .sec03 .pic_list {gap: 10px}
	#service .sec04 .how_list {margin-top: var(--gap-sub); gap: 16px}
	/* #service .sec05 {height: 160vw} */
	/* #service .sec05 .con-txt {left: 20px; right: 20px; padding: 0} */
	
	
	.feature_list .feature-bx {width: 100%}
	.feature_list .feature-bx .con-txt {height: auto}
	.feature_list .con-flex {flex-direction: column}
	.pack_list .con-flex {gap:10px; align-items: flex-start}
	.pack_list .pack-bx {width:calc(100% / 2 - 5px);}
	.pack_detail .con-flex {gap: 16px}	
	
	#philosophy .sub-top-bn-com {height: 100vw}
	
	#history .sec02 .year-bx {flex-direction: column;}
	#history .sec02 .year-bx .year-txt,
	#history .sec02 .year-bx .year-img {width: 100%; padding: 0}
	#history .sec02 .year-bx .year-img {margin-top: 20px}
	#history .sec02 .year-bx:nth-child(2n+1) .year-txt {padding: 0; text-align: left}
	#history .sec02 .year-bx:nth-child(2n) {flex-direction:column; padding: 0;}
	#history .sec02 .year-bx:nth-child(2n) .year-img {padding: 0}
	#history .sec02 .year-bx:not(:last-child)::before {left: 0;}
	#history .sec02 .year-bx,
	#history .sec02 .year-bx:nth-child(2n) {flex-direction: column; padding-bottom: 40px; padding-left: 20px}
	#history .sec02 .year-bx .year-txt::after {right: auto; left:-26px}
	#history .sec02 .year-bx:nth-child(2n) .year-txt::after {left: -26px;}
	#history .sec02 .year-bx .year-txt {font-size: 14px}
	
	.ex_list .list { aspect-ratio: 16 / 9;}
	.ex_list .list .txt {margin-left: 20px}
	.ex_list .list .txt dd {font-size: 12px}
	.ex_list {gap:16px}
	
	.sub-top-bn-com .con-txt p {font-size: 14px}

	#service .sec05 .con-txt{top:-30px;}
}