@charset "utf-8";
/* 공통 */
.sub-pd { padding: 120px 0;}
.sub-pd.first { padding-top: 0; padding-bottom: 120px; }
.sub-pd.last { padding-top: 120px; padding-bottom: 0; }
.sub-pd.gray { background: #fafafa; }
.sub-list { display: flex; flex-wrap: wrap; gap: 32px; } 
.sub-list .col { flex: 1; padding: 36px; border-radius: 24px; border: 1px solid #EEE; background: #FFF; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.04); }
.sub-list .col .icon { width: 64px; height: 64px; background-repeat: no-repeat; background-position: center; background-size: contain; transition: .3s;}
.sub-list .col .tt { font-size: var(--font-size24); line-height: 1.58em; font-weight: 600; color: #222; margin: 24px 0; transition: .3s;}
.sub-list .col .txt { line-height: 1.87em; }
.sub-list.tc .col { text-align: center; padding: 36px 15px;}
.sub-list.tc .col .tt { margin-bottom: 6px;}
.subtab-wrap { text-align: center; margin-bottom: 60px; }
.subtab { display: inline-flex; padding: 12px; border-radius: 50px; border: 1px solid #eee; background: #fafafa; }
.subtab li { width: auto;}
.subtab li a { height: 48px; display: inline-flex; align-items: center; padding: 0 24px; border-radius: 24px; color: #999; font-size: var(--font-size18); line-height: 1.77em; font-weight: 600; }
.subtab li.active a,
.subtab li a:hover { color: #fff; background: var(--color-primary);}

/* 회사소개 */
.it-fx { display: flex; align-items: center; padding-bottom: 55px; }
.it-fx .left { width: 55%; padding-right: 185px; }
.it-fx .left .main-subtit { padding-left: 44px; position: relative; }
.it-fx .left .main-subtit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 32px; height: 2px; background: var(--color-primary);}
.it-fx .left h3 { font-size: var(--font-size24); line-height: 1.58em; color: #222; font-weight: 600; margin: 48px 0;}
.it-fx .left h3 span { color: var(--color-primary);}
.it-fx .left .txt { padding-bottom: 48px; border-bottom: 1px solid #eee; margin-bottom: 48px; }
.it-fx .left .txt p { margin-bottom: 35px; font-size: var(--font-size20); line-height: 1.7em; }
.it-fx .left .txt p:last-child { margin-bottom: 0; }
.it-num { display: flex; gap: 64px; flex-wrap: wrap;}
.it-num .col { width: 100px; position: relative; text-align: center; }
.it-num .col::after { content: ""; position: absolute; right: -40px; top: 42px; width: 18px; height: 16px; background: url(../images/sub/sub1-1-arrow.png) center no-repeat; background-size: contain; }
.it-num .col:last-child::after { display: none; }
.it-num .col .circle { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; color: #b1000e; font-size: var(--font-size18); font-weight: 500; line-height: 1.77em; border-radius: 100%; border: 3px solid #FBDCDE; margin-bottom: 14px;}
.it-num .col .circle strong { font-size: var(--font-size32); font-weight: 700; display: inline-block; }
.it-num .col .text { font-weight: 600; line-height: 1.87em; color: #222; }
.it-fx .right { width: 45%; position: relative; }
.it-fx .right img { border-radius: 32px; }
.it-fx .right .abbox { padding: 32px; display: inline-block; border-radius: 24px; border: 1px solid #EEE; background: #FFF; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.04); position: absolute; left: -96px; bottom: -55px; }
.it-fx .right .abbox .tt { position: relative; font-size: var(--font-size18); font-weight: 600; color: #222; line-height: 1.77em; padding-left: 24px; margin-bottom: 16px; }
.it-fx .right .abbox .tt::before { content: ""; position: absolute; left: 0; width: 14px; height: 14px; border-radius: 14px; background: var(--color-primary); border: 3px solid #FBDCDE; top: 9px; }
.it-fx .right .abbox .txt { line-height: 1.87em; }
.it-list .col.bg1 .icon { background-image: url(../images/sub/sub1-1-icon1.png);}
.it-list .col.bg1:hover .icon { background-image: url(../images/sub/sub1-1-icon1-c.png);}
.it-list .col.bg2 .icon { background-image: url(../images/sub/sub1-1-icon2.png);}
.it-list .col.bg2:hover .icon { background-image: url(../images/sub/sub1-1-icon2-c.png);}
.it-list .col.bg3 .icon { background-image: url(../images/sub/sub1-1-icon3.png);}
.it-list .col.bg3:hover .icon { background-image: url(../images/sub/sub1-1-icon3-c.png);}
.it-list .col:hover .tt { color: var(--color-primary);}
.it-op { display: flex; gap: 20px; }
.it-op li { flex: 1; position: relative; border-radius: 12px; overflow: hidden; }
.it-op li::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 12px; border: 1px solid #eee;}

/* 인증서 */
.certi-list { display: flex; flex-wrap: wrap; gap: 56px 40px; }
.certi-list li { width: calc(100%/5 - 32px); text-align: center; }
.certi-list li .thumb { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
.certi-list li .thumb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 16px; border: 1px solid #eee;}
.certi-list li .tit { font-size: var(--font-size18); line-height: 1.55em; font-weight: 600; }

/* 연혁 */
.hst { position: relative; height: 100%; text-align: center; padding-bottom: 150px; }
.hst .big-year { position: sticky; top: 100px; display: inline-block; padding: 16px 36px; border-radius: 32px; background: #FFF; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08); z-index: 2; }
.hst .big-year span { display: inline-block; padding-left: 16px; position: relative; font-size: var(--font-size48); font-weight: 700; line-height: 1.16em; color: #222; }
.hst .big-year span::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 6px; background: var(--color-primary); bottom: 0; margin: auto; }
.hst .track { position: absolute; left: 0; right: 0; margin: auto; top: 87px; height: 94%; width: 1px; background: #d9d9d9; z-index: -1; }
.hst .track .line { position: absolute; top: 0; left: 0; width: 1px; height: 0; transition: .3s; background: var(--color-primary); }
.hst .wrap { margin-top: 40px; }
.hst .wrap .group { position: relative; margin-bottom: 40px; width: 50%; margin-left: 50%; padding-left: 140px; padding-right: 60px; text-align: left; }
.hst .wrap .group::before { content: ""; position: absolute; left: -8px; border-radius: 8px; background: #fff;  box-shadow: 0 0 16px 0 rgba(230, 0, 19, 0.16), 0 0 8px 0 rgba(0, 0, 0, 0.16); top: 0; bottom: 0; margin: auto; width: 16px; height: 16px; transition: .3s;}
.hst .wrap .group:last-child { margin-bottom: 0; }
.hst .wrap .group .inner { border-radius: 32px; background: #FFF; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08); position: relative; padding: 40px; transition: .3s;}
.hst .wrap .group .inner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 32px; border: 1px solid #eee; transition: .3s;}
.hst .wrap .group .inner .year { line-height: 1.43em; font-size: var(--font-size32); font-weight: 700; color: var(--color-primary); margin-bottom: 18px; }
.hst .wrap .group .inner .txt p { position: relative; line-height: 1.77em; padding-left: 16px; font-size: var(--font-size18); margin-bottom: 10px; }
.hst .wrap .group .inner .txt p:last-child { margin-bottom: 0; }
.hst .wrap .group .inner .txt p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 4px; background: var(--color-primary); top: 13px; }
.hst .wrap .group:nth-of-type(even) { margin-left: 0; padding-left: 60px; padding-right: 140px; }
.hst .wrap .group:nth-of-type(even)::before { left: auto; right: -8px; }
.hst .wrap .group:nth-of-type(even) .inner { text-align: right; }
.hst .wrap .group:nth-of-type(even) .inner .txt p { padding-left: 0; padding-right: 16px; }
.hst .wrap .group:nth-of-type(even) .inner .txt p::before { left: auto; right: 0; }
.hst .wrap .group.active::before { background: var(--color-primary); box-shadow: 0 0 16px 0 rgba(230, 0, 19, 0.16), 0 0 8px 0 rgba(0, 0, 0, 0.16); }
.hst .wrap .group.active .inner { box-shadow: 0 0 16px 0 rgba(230, 0, 19, 0.16), 0 0 16px 0 rgba(0, 0, 0, 0.08); }
.hst .wrap .group.active .inner::before { border-color: #F5969E;}
.hst .big-year .hst-big-year-roll { display: inline-block; padding-left: 16px; position: relative; overflow: hidden; vertical-align: middle; min-width: 2.5em; height: 1.16em; line-height: 1.16em; font-size: var(--font-size48); font-weight: 700; }
.hst .big-year .hst-big-year-roll::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 6px; height: 6px; border-radius: 6px; background: var(--color-primary); }
.hst .big-year .hst-big-year-txt { display: block; position: relative; color: #222; padding-left: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.hst .big-year .hst-big-year-txt::before { display: none; content: none; }
.hst .track .line { transition: none; }

/* 오시는 길 */
.map { border-radius: 32px; overflow: hidden; }
.lct { margin-top: 48px; }
.lct h4 { font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; color: var(--color-primary);}
.lct h3 { margin: 8px 0 32px; font-size: var(--font-size28); font-weight: 500; line-height: 1.5em; }
.lct .inbox { padding: 32px; display: flex; border-radius: 16px; border: 1px solid #eee; gap: 10px 160px; flex-wrap: wrap;}
.lct .inbox .col { display: flex; font-size: var(--font-size18); line-height: 1.77em; }
.lct .inbox .col .tt { padding-right: 40px; color: var(--color-primary); font-weight: 600; }

/* 설치사례 */
.case-list { display: flex; flex-wrap: wrap; padding-bottom: 40px; gap: 56px 30px; }
.case-list .col { width: calc(100%/3 - 20px); border-radius: 32px; overflow: hidden;}
.case-list .col .thumb { position: relative; overflow: hidden; padding-bottom: 62%; display: block; }
.case-list .col .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.case-list .col .txtbox { border: 1px solid #ddd; border-top: none; border-radius: 0 0 32px 32px; padding: 28px 32px;}
.case-list .col .txtbox .tt { font-size: var(--font-size24); line-height: 1.58em; color: #222; font-weight: 600; margin-bottom: 48px; }
.case-list .col .txtbox .info span { display: inline-block; padding-right: 17px; position: relative; color: #999; font-weight: 500; line-height: 1.5em; }
.case-list .col .txtbox .info span::after { content: ""; width: 1px; height: 15px; background: #ddd; position: absolute; right: 6px; top: 4px; }
.case-list .col .txtbox .info span:last-child { padding-right: 0; }
.case-list .col .txtbox .info span:last-child::after { display: none; }

/* 설치사례 상세 */
.case-detail-list { display: flex; margin: 60px 0; flex-wrap: wrap; gap: 25px 12px; }
.case-detail-list li { width: calc(100%/3 - 8px); }
.case-detail-list li .tt { font-size: var(--font-size18); line-height: 1.77em; color: #222; font-weight: 600; margin-bottom: 4px; }
.case-detail-list li .txt { line-height: 1.87em; }
.case-swiper { border-radius: 32px; overflow: hidden;}
.case-swiper .thumb { position: relative; overflow: hidden; padding-bottom: 45%; display: block; }
.case-swiper .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.case-list-btn { width: 126px; height: 62px; border-radius: 32px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; line-height: 1.5em; font-weight: 600; line-height: 1.87em; color: #999; margin: auto; }
.case-list-btn:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary);}
.case-prev::after, .case-next::after { display: none; }
.case-prev, .case-next { width: 68px; height: 68px; border-radius: 68px; border-radius: 100px; background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); background-repeat: no-repeat; background-position: center; background-size: 14px; top: 50%; transform: translateY(-50%); margin-top: 0; transition: .3s;}
.case-prev { background-image: url(../images/sub/sub2-prev.png); left: 32px;}
.case-prev:hover { background-color: var(--color-primary);}
.case-next { background-image: url(../images/sub/sub2-next.png); right: 32px; left: auto;}
.case-next:hover { background-color: var(--color-primary);}

/* sub3 공통 */
.sub3-bg { display: flex; align-items: center; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; height: 77.7vh; }
.sub3-bg::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)}
.sub3-bg.bg1 { background-image: url(../images/sub/sub3-1-big.jpg);}
.sub3-bg.bg2 { background-image: url(../images/sub/sub3-2-big.png);}
.sub3-bg.bg3 { background-image: url(../images/sub/sub3-3-big.jpg);}
.sub3-bg.bg4 { background-image: url(../images/sub/sub3-4-big.jpg);}
.sub3-bg.bg5 { background-image: url(../images/sub/sub3-5-big.jpg);}
.sub3-bg .main-tit {color: #fff; }
.sub3-bg .main-txt { font-weight: 500; color: #ccc; margin-bottom: 20px; }
.sub3-bg .main-txt:last-child { margin-bottom: 0; }
.sub3-bg .info { position: relative; z-index: 1; }
.sub3-fx { display: flex; align-items: center; margin-bottom: 120px; gap: 30px 120px; flex-wrap: wrap;}
.sub3-fx.mg { margin-bottom: 80px; }
.sub3-fx:last-child { margin-bottom: 0; }
.sub3-fx>div { width: calc(100%/2 - 60px); }
.sub3-fx .info { padding-right: 40px; }
.sub3-fx .info h4 { font-size: var(--font-size20); line-height: 1.7em; color: var(--color-primary); font-weight: 600; margin-bottom: 12px; }
.sub3-fx .info h2 { font-size: var(--font-size40); line-height: 1.4em; font-weight: 700; color: #222; }
.sub3-fx .info .txt { margin-top: 48px; }
.sub3-fx .info .txt p { margin-bottom: 20px; font-size: var(--font-size20); line-height: 1.7em; font-weight: 400; letter-spacing: -.04em;}
.sub3-fx .info .txt p:last-child { margin-bottom: 0; }
.sub3-fx .info .main-link { margin-top: 48px; }
.sub3-fx .img { border-radius: 32px; overflow: hidden; position: relative; }
.sub3-fx .img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 32px; border: 1px solid #eee;}
.sub3-fx.rv { flex-direction: row-reverse; }
.sub3-fx .white .col { margin-bottom: 19px; border-radius: 32px; border: 1px solid #EEE; background: #FFF; padding: 32px; display: flex; }
.sub3-fx .white .col:last-child { margin-bottom: 0; }
.sub3-fx .white .col .num { border-radius: 18px; background: #E60013; box-shadow: 0 0 16px 0 rgba(230, 0, 19, 0.16), 0 0 16px 0 rgba(0, 0, 0, 0.08); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1em; font-weight: 600; }
.sub3-fx .white .col .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 24px; }
.sub3-fx .white .col .txtbox .tt { font-size: var(--font-size24); font-weight: 600; line-height: 1.58em; color: #222; margin-bottom: 12px; }
.sub3-fx .white .col .txtbox .text { line-height: 1.87em; }
.relate-swiper .item a { display: block; }
.relate-swiper .item .thumb { border-radius: 32px; overflow: hidden; padding-bottom: 62%; display: block; position: relative; }
.relate-swiper .item .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.relate-swiper .item .info { margin-top: 32px; display: flex; justify-content: space-between; align-items: flex-start;}
.relate-swiper .item .info .tt { font-size: var(--font-size24); line-height: 1.58em; font-weight: 600; color: #222; margin-bottom: 12px; }
.relate-swiper .item .info .txt { line-height: 1.87em; }
.relate-swiper .item .info .view { width: 38px; height: 38px; background: url(../images/main/main-view.png) center no-repeat; background-size: contain; transition: .3s; display: inline-block; }
.relate-swiper .item a:hover .info .view { background-image: url(../images/main/main-view-c.png);}
.link-tc { text-align: center; }

/* panasonic 공식딜러 */
.pana-wrap { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.pana-wrap.wt::before { content: ""; position: absolute; left: 0; top: 35px; width: 80%; height: 1px; background: #d9d9d9; margin: auto; right: 0; }
.pana-wrap .col { width: auto; text-align: center; flex: 1;}
.pana-wrap .col .num { border-radius: 72px; border: 1px solid #EEE; background: #FFF; display: flex; align-items: center; justify-content: center; margin: auto; width: 72px; height: 72px; transition: .3s; font-size: var(--font-size24); font-weight: 700; line-height: 1em; color: #999; position: relative; z-index: 1; }
.pana-wrap .col .tt { font-size: var(--font-size24); line-height: 1.58em; font-weight: 600; color: #222; margin: 24px 0 12px; }
.pana-wrap .col .txt { line-height: 1.87em; }
.pana-wrap .col:hover .num { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 0 16px 0 rgba(230, 0, 19, 0.16), 0 0 16px 0 rgba(0, 0, 0, 0.08);}

/* 제품 리스트 */
.product-list { display: flex; padding-bottom: 40px; flex-wrap: wrap; gap: 56px 40px;}
.product-list .col { width: calc(100%/4 - 30px); text-align: center; }
.product-list .col a { display: block; border-radius: 32px; overflow: hidden; border: 1px solid #ddd;}
.product-list .col .thumb { padding-bottom: 80%; display: block; position: relative; overflow: hidden; }
.product-list .col .thumb img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.product-list .col .txtbox { border-radius: 0 0 32px 32px; padding: 28px 10px 36px; border-top: 1px solid #ddd;}
.product-list .col .ctr { line-height: 1.5em; font-weight: 500; color: var(--color-primary); margin-bottom: 10px; }
.product-list .col .tt { font-size: var(--font-size24); line-height: 1.58em; color: #222; font-weight: 600; }

/* 제품 상세 */
.product-summary { display: flex; align-items: flex-start;}
.product-summary .image { width: 50%; padding-right: 80px; }
.product-summary .image .thumb { position: relative; padding-bottom: 80%; display: block; overflow: hidden; border-radius: 10px; }
.product-summary .image .thumb img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.product-summary .image .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; border-radius: 10px; }
.pd-board-swiper { width: 100%; margin-bottom: 24px; }
.pd-thumb-swiper { width: 100%; }
.pd-thumb-swiper .swiper-slide { cursor: pointer;}
.pd-thumb-swiper .tt { margin-top: 24px; font-size: var(--font-size20); line-height: 1.7em; color: #222; font-weight: 600; } 
.product-summary .info { width: 50%; padding-left: 20px; }
.product-summary .info .ctr { display: flex; gap: 8px; flex-wrap: wrap;}
.product-summary .info .ctr span { display: inline-block; padding: 3px 16px 2px; border-radius: 25px; line-height: 1.87em; font-weight: 600; background: #f5f5f5; }
.product-summary .info .ctr span.type { color: var(--color-primary); background: #fef3f4; }
.product-summary .info .tit { font-size: var(--font-size48); font-weight: 700; color: #222; line-height: 1.16em; margin: 36px 0;}
.product-summary .info .txt { font-size: var(--font-size18); line-height: 1.77em; margin-bottom: 57px; }
.product-summary .info .btns { display: flex; }
.product-summary .info .btns a { border-radius: 24px; border: 1px solid #ddd; height: 96px; display: flex; align-items: center; justify-content: center; color: #999; font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; }
.product-summary .info .btns a:hover { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary);}
.product-summary .info .btns .inquiry-btn { flex: 1 1 auto; min-width: 0; width: 1%; margin-right: 24px; }
.product-summary .info .btns .download-btn { width: 96px; background: url(../images/sub/download.png) center no-repeat;  background-size: 32px; text-indent: -9999em;}
.product-summary .info .btns .download-btn:hover { background-image: url(../images/sub/download-w.png);}
.pd-tab { border-bottom: 1px solid #ddd; margin-bottom: 80px; gap: 10px 60px; flex-wrap: wrap; display: flex; }
.pd-tab li { width: auto;}
.pd-tab li a { display: inline-block; padding-bottom: 28px; position: relative; font-size: var(--font-size24); line-height: 1.58em; color: #999; font-weight: 600; }
.pd-tab li a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--color-primary); display: none; }
.pd-tab li a:hover { color: var(--color-primary);}
.pd-tab li.active a { color: var(--color-primary); }
.pd-tab li.active a::after { display: block; }
[data-tab-content] { display: none; }
[data-tab-content].active { display: block; }
.feature { display: flex; flex-wrap: wrap; gap: 24px; }
.feature .col { width: calc(100%/2 - 12px); border-radius: 24px; border: 1px solid #EEE; background: #FAFAFA; text-align: center; padding: 56px 10px; }
.feature .col .tt { font-size: var(--font-size32); line-height: 1.43em; color: #222; font-weight: 600; margin-bottom: 24px; }
.feature .col .txt { font-size: var(--font-size18); line-height: 1.77em; }
.spec { padding: 12px 36px; border-radius: 24px; border: 1px solid #EEE; background: #FAFAFA; position: relative; }
.spec.mg { margin: 24px 0; }
.spec li { padding: 24px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; font-size: var(--font-size18); line-height: 1.77em; }
.spec li:last-child { border: none; }
.spec li .tt { font-weight: 600; color: #999; margin-right: 30px; }
.spec li .text { font-weight: 500; color: #222; flex: 1 1 auto; min-width: 0; width: 1%; text-align: right; }
.spec li .tt strong { display: inline-block; font-weight: 600; padding-left: 44px; position: relative; }
.spec li .tt strong::before { content: ""; position: absolute; left: 0; width: 32px; height: 32px; top: 0; background: url(../images/sub/pd-sch.png) center no-repeat; background-size: contain; }
.spec li .toggle-btn { display: inline-block; padding-right: 28px; position: relative; }
.spec li .toggle-btn::after { content: ""; position: absolute; width: 14px; height: 8px; background: url(../images/sub/pd-toggle.png) center no-repeat; background-size: contain; right: 0; top: 0; bottom: 0; margin: auto; transition: .3s;}
.spec li .toggle-btn.active::after { transform: rotate(180deg);}
.spec li .toggle-btn.disabled { pointer-events: none; cursor: default; color: #999; }
.spec li .toggle-btn.disabled::after { display: none; }
.spec li .cnt { position: absolute; right: 0; top: 85px; width: 60%; border-radius: 24px; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 12px 0; z-index: 11; }
.spec li .cnt a { display: block; padding: 6px 24px; color: #484848; font-size: 15px; line-height: 1.444em; }
.spec li .cnt a:hover { color: var(--color-primary);}
.spec li .cnt a .lens-ratio { float: right; color: #999; font-size: 13px; }
.spec.wt li .tt { width: 20%; }
.spec.wt li .text { flex: 1 1 auto; min-width: 0; width: 1%; text-align: left; }
.pd-download { display: flex; flex-wrap: wrap; gap: 24px; }
.pd-download .col { flex: 1; border-radius: 24px; border: 1px solid #EEE; background: #FAFAFA; padding: 36px; display: flex; justify-content: space-between; align-items: center;}
.pd-download .col .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 10px; }
.pd-download .col .info .ctr { line-height: 1.87em; color: #999; font-weight: 600; margin-bottom: 8px; }
.pd-download .col .info .tt { font-size: var(--font-size20); line-height: 1.7em; font-weight: 600; color: #222; }
.pd-download .col .btn { display: inline-block; width: 96px; height: 96px; border-radius: 24px; border: 1px solid #ddd; background: #FFF url(../images/sub/download.png) center no-repeat; background-size: 32px; text-indent: -9999em;}
.pd-download .col .btn:hover { border-color: var(--color-primary); background-color: var(--color-primary); background-image: url(../images/sub/download-w.png);}

/* sub5 공통 */
.cs-titbox { display: flex; margin-bottom: 40px; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.cs-tit { position: relative; font-size: var(--font-size24); line-height: 1.58em; font-weight: 600; color: #222; padding-left: 36px; }
.cs-tit::before { content: ""; position: absolute; left: 0; top: 8px; width: 22px; height: 20px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; }

/* AS센터 안내 */
.as-process { display: flex; flex-wrap: wrap; gap: 30px; }
.as-process .col { width: calc(100%/5 - 24px); padding: 32px; border-radius: 24px; border: 1px solid #EEE; background: #FFF; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.04); }
.as-process .col .num { line-height: 1.87em; font-weight: 700; color: #f5969e; }
.as-process .col .tt { margin: 4px 0 16px; font-size: var(--font-size24); line-height: 1.58em; color: #222; font-weight: 600; }
.as-process .col .txt { line-height: 1.87em; margin-bottom: 16px; }
.as-process .col .icon { text-align: right; }
.as-search-wrap { display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap;}
.as-tab { display: inline-flex; padding: 8px; border-radius: 60px; border: 1px solid #EEE; background: #fafafa;}
.as-tab li { width: auto;}
.as-tab li a { height: 46px; border-radius: 23px; display: inline-flex; align-items: center; text-align: center; padding: 0 24px; font-weight: 600; line-height: 1.87em; color: #999; }
.as-tab li.active a { background: #fff; color: var(--color-primary); border-radius: 100px; border: 1px solid #EEE; background: #fff; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);}
.as-tab li a:hover { background: #fff; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08); color: var(--color-primary);}
.as-search-wrap .search { display: inline-flex; padding: 8px; border-radius: 60px; border: 1px solid #EEE; background: #fafafa; gap: 8px; }
.as-search-wrap .search select { height: 46px; border-radius: 23px; color: #999; }
.as-search-wrap .search .input-wrap { position: relative; }
.as-search-wrap .search .input-wrap .input {width:330px; height: 46px; border-radius: 23px; padding: 10px 16px; padding-right: 46px; }
.as-search-wrap .search .input-wrap .input::placeholder { color: #999; }
.as-search-wrap .search .btn { position: absolute; right: 0; top: 0; width: 46px; height: 46px; border: none; background: transparent url(../images/sub/sch.png) center no-repeat; text-indent: -9999em; background-size: 18px; }
.as-noti { position: relative; margin-top: 40px; padding-left: 34px; font-weight: 500; line-height: 1.87em; }
.as-noti::before { content: ""; position: absolute; left: 0; width: 24px; height: 24px; top: 2px; background: url(../images/sub/noti-icon.png) center no-repeat; background-size: contain; }

/* 계산기 바로가기 */
.gray-txt { margin-top: 48px; line-height: 1.87em; color: #999; position: relative; padding-left: 34px; }
.gray-txt::before { content: ""; position: absolute; left: 0; width: 24px; height: 24px; top: 3px; background: url(../images/sub/noti-icon.png) center no-repeat; background-size: contain; }
.cc-list .col { background: #fafafa; box-shadow: none;}
.cc-list .col.bg1 .icon { background-image: url(../images/sub/sub5-4-icon1.png);}
.cc-list .col.bg1:hover .icon { background-image: url(../images/sub/sub5-4-icon1-c.png);}
.cc-list .col.bg2 .icon { background-image: url(../images/sub/sub5-4-icon2.png);}
.cc-list .col.bg2:hover .icon { background-image: url(../images/sub/sub5-4-icon2-c.png);}
.cc-list .col.bg3 .icon { background-image: url(../images/sub/sub5-4-icon3.png);}
.cc-list .col.bg3:hover .icon { background-image: url(../images/sub/sub5-4-icon3-c.png);}