.flex-box { display:flex } 
 .flex-box.column { display:flex; flex-direction: column; } 
 .sec { padding-top:150px } 
 em.line-br { font-style: normal; } 
.color_txt { color:var(--color-main) } 
/* 페이징 */
.paging { margin-top:80px; display:flex; justify-content:center; align-items: center; } 
.paging a.prev { content: url('/img/pg_prev_btn_on.svg'); } 
.paging a.next { content: url('/img/pg_next_btn_on.svg'); } 
.paging { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:28px; flex-wrap:wrap; } 
.paging a { padding:8px 10px; border-radius:6px; } 
.paging a.on { font-weight:600; color: crimson; } 
.paging a.disabled { pointer-events:none; opacity:.4; } 

.custom-file-label::after { right:20px!important } 
 /* 서브페이지 공통 css 시작 */
.sub-page { padding: 100px 0 200px; } 
.sub-page .page-tit { margin-bottom: 100px; } 
.sub-page .page-tit .tit { font-size: 1.5em; font-weight: 600; text-align: center; line-height: 1.2; margin-top:100px; } 
.sub-page [class*=cont-box]:not(:last-child) { margin-bottom: 150px; } 
 .sub-page .page-tit .sub_tit { line-height: 1.5; text-align: center; margin-top: 30px; } 
@media all and (max-width: 1199px){
 .sub-page .page-tit { margin-bottom: 100px; } 
 .sub-page { padding:80px 0 100px; } 
 }
@media all and (max-width: 1024px) { /* .sub-page { padding: 145px 0 160px; } */
 .sub-page .page-tit { margin-bottom: 60px; } 
 /* .sub-page .page-tit .tit { font-size: 2.50em; } */
 .sub-page [class*=cont-box]:not(:last-child) { margin-bottom: 80px; } 
 }
@media all and (max-width: 768px){
 .sub-page { padding: 80px 0 120px; } 
 .sub-page .page-tit { margin-bottom:30px } 
 /* .sub-page .page-tit .tit { font-size: 2.22em; } */ } 
@media all and (max-width: 640px) { } 

.sub_bg_wrap { } 
.nav04 { background: url(../img/sub/nav_menu04_bg.png)no-repeat center center /cover; aspect-ratio: 1920/615; } 
.nav03 { background: url(../img/sub/nav_menu03_bg.png)no-repeat center center /cover; aspect-ratio: 1920/615; } 
.sub_bg_wrap .sub_top_title_wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; height: 100%; color: #fff; } 
.sub_bg_wrap .sub_top_title_wrap img { height: 35px; } 
.sub_bg_wrap .sub_top_title_wrap span { background: #fff; width: 120px; height: 1px; margin-top: 20px; } 
.sub_bg_wrap .sub_top_title_wrap h2 { font-size: 3em; font-weight: 500; } 
.sub_bg_wrap .sub_top_title_wrap p { } 
@media(max-width:1199px){
 .sub_bg_wrap .sub_top_title_wrap img { height:30px; } 
 .sub_bg_wrap .sub_top_title_wrap { gap:10px; } 
 .sub_bg_wrap .sub_top_title_wrap h2 { font-size: 2.5em; } 
 }
@media(max-width:1024px){
 .sub_bg_wrap { aspect-ratio: 0; height:400px;; } 
 }
@media(max-width:640px){
 .sub_bg_wrap .sub_top_title_wrap img { height: 25px;; } 
 .sub_bg_wrap .sub_top_title_wrap h2 { font-size: 1.8em; } 
 }
/* 서브페이지 공통 css 끝 */


#brandstory { padding:0 } 
#brandstory .sec { height:100vh; color:#fff; padding:0; } 
#brandstory .sec .cinner { height:100% } 
#brandstory .sec1 { background: url(../img/sub/bs_sec01.png)no-repeat center center /cover; } 
#brandstory .sec1 .cinner > div { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; } 
#brandstory .sec1 p { margin: 15px 0 45px; font-size: 2em; } 
#brandstory .sec1 span { font-size: 1.6em; } 

#brandstory .sec2 { background: url(../img/sub/bs_sec02.png)no-repeat center center /cover; } 
#brandstory .sec2 ul { display: flex; align-items: center; justify-content: center; gap: 150px; height: 100%; } 
#brandstory .sec2 ul li { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; } 
#brandstory .sec2 ul li:nth-child(2) { margin-top:-65px; } 
#brandstory .sec2 ul li p { font-size: 1.15em; } 

#brandstory .sec3 { background: url(../img/sub/bs_sec03.png)no-repeat center center /cover; } 
#brandstory .sec3 .swiper { height:100% } 
#brandstory .sec3 .swiper-wrapper { height:100% } 
#brandstory .sec3 .swiper-slide { height:100%; display: flex; align-items: center; justify-content: center; font-size: 2em; text-align: center; } 
#brandstory .sec3 .swiper-slide strong { } 
#brandstory .sec3 .swiper-button-next:after, #brandstory .sec3 .swiper-button-prev:after { display:none } 
#brandstory .sec3 .swiper-button-next, #brandstory .sec3 .swiper-button-prev { width:76px; aspect-ratio: 1/1; height:auto } 

#brandstory .sec4 { background: url(../img/sub/bs_sec04.png)no-repeat center center /cover; } 
#brandstory .sec4 p { font-size: 2em; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } 
#brandstory .sec4 p span { display: flex; align-items: center; gap: 10px; } 
#brandstory .sec4 p span img { height: 40px; } 

@media(max-width:1399px) { } 
@media(max-width:1199px) { } 
@media(max-width:1024px){
 #brandstory .sec1 p,
 #brandstory .sec3 .swiper-slide,
 #brandstory .sec4 p { font-size: 1.5em; } 
 #brandstory .sec1 span,
 #brandstory .sec2 ul li p { font-size: 1em; } 
 #brandstory .sec2 ul { gap:0; justify-content: space-between; } 
 #brandstory .sec4 p span img { height:30px; } 
 #brandstory .sec3 .swiper-button-next, #brandstory .sec3 .swiper-button-prev { width:40px; } 
 }
@media(max-width:768px){
 #brandstory .sec1 .cinner > div img { width:60% } 
 #brandstory .sec2 ul li { width:30% } 
 }
@media(max-width:500px){
 #brandstory .sec2 { height: auto; padding:150px 0; } 
 #brandstory .sec2 ul { flex-direction: column; justify-content: center; gap:30px; } 
 #brandstory .sec2 ul li:nth-child(2) { margin-top:0 } 
 #brandstory .sec2 ul li { width:40%; gap:10px; } 
 #brandstory .sec4 p span { display: flex; flex-direction: column; gap: 0; } 
 }



#brandskill { padding:0 } 
#brandskill .sec .cinner { height:100% } 
#brandskill .sec1 { background: url(../img/sub/skill_sec01.png)no-repeat center center /cover; height:100vh; color:#fff; padding:0 } 
#brandskill .sec2 .cinner { background: #fff; margin-top:-350px; position:relative; } 
#brandskill .sec2 { } 
#brandskill .sec2 .sec2_top { border-top: 7px solid var(--color-main); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 0 200px; gap: 20px; } 
#brandskill .sec2 .sec2_top h3 { font-size: 2em; font-weight: bold; } 
#brandskill .sec2 .sec2_top p { color: #111; } 
#brandskill .sec2 .cinner:before { position:absolute; left:0; bottom:0; width:100%; height:40%; background: #f7f9f3; content:''; } 
#brandskill .sec2 .swiper-slide { text-align: center; color:#b4b4b4; } 
#brandskill .sec2 .swiper-slide.swiper-slide-active { color:var(--color-main); font-weight: bold; font-size: 1.5em;; } 
#brandskill .sec2 .swiper-button-next:after, #brandskill .sec2 .swiper-button-prev:after { display:none } 
#brandskill .sec2 .swiper-button-next, #brandskill .sec2 .swiper-button-prev { width:60px; aspect-ratio: 1/1; height:auto; bottom:50px } 
#brandskill .sec2 .img_wrap { position: relative; display: flex; align-items: center; justify-content: center; padding-top:50px } 
#brandskill .sec2 .img_wrap.mo_img_wrap { display:none } 
#brandskill .sec2 .img_wrap img { width:100% } 
#brandskill .sec2 .swiper-slide { transition: transform .35s ease, opacity .35s ease, color .35s ease; transform: translateY(220px) } 
#brandskill .sec2 .swiper-slide-active { opacity: 1; transform: translateY(0px); } 
#brandskill .sec2 .swiper-slide-prev,
#brandskill .sec2 .swiper-slide-next { transform: translateY(100px); } 
#brandskill .sec3 { } 
#brandskill .sec3 h2 { font-size: 1.5em; font-weight: 500; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; } 
#brandskill .sec3 h2 span { font-size: .7em; } 
#brandskill .sec3 ul { display: flex; flex-wrap: wrap; margin-bottom: 200px; } 
#brandskill .sec3 ul li { width: calc(100% / 7); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } 
#brandskill .sec3 ul li:nth-child(2n) { margin-top:100px; } 
#brandskill .sec3 ul li p { font-size: 1.1em; } 
#brandskill .sec3 ul li img { } 
#brandskill .sec4 { background: url(../img/sub/skill_sec03.png)no-repeat center center /cover; height:100vh; color:#fff; padding:0 } 
#brandskill .sec4 p { font-size: 2em; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } 
#brandskill .sec4 p span { display: flex; align-items: center; gap: 10px; } 
 
@media(max-width:1199px){
 #brandskill .sec3 ul { flex-wrap:wrap; justify-content: center; gap:50px 0 } 
 #brandskill .sec3 ul li { width:calc(100% / 4) } 
 #brandskill .sec3 ul li:nth-child(2n) { margin-top:0 } 
 }
@media(max-width:1024px){
 #brandskill .sec1 { height: 600px; } 
#brandskill .sec2 .img_wrap.mo_img_wrap { display:block } 
#brandskill .sec2 .img_wrap.pc_img_wrap { display:none } 
#brandskill .sec2 .img_wrap { padding-top:0 } 
#brandskill .sec2 .swiper-button-next, #brandskill .sec2 .swiper-button-prev { width:40px } 
 }
@media(max-width:768px){
 #brandskill .sec1 { height: 400px; } 
#brandskill .sec2 .sec2_top h3 { font-size: 1.5em; } 
#brandskill .sec2 .sec2_top p { padding:0 20px; } 
#brandskill .sec2 .sec2_top p span { display:inline } 
#brandskill .sec2 .swiper-slide.swiper-slide-active { font-size:1.2em } 
#brandskill .sec2 .swiper-slide-prev, #brandskill .sec2 .swiper-slide-next { transform: translateY(60px); } 
#brandskill .sec2 .sec2_top { padding:60px 0 100px; } 
#brandskill .sec4 { height:auto; padding:150px 0 } 
#brandskill .sec3 { padding-top:80px } 
#brandskill .sec3 ul { gap:50px 20px; margin-bottom:100px; } 
#brandskill .sec3 ul li { width:calc(50% - 10px) } 
#brandskill .sec4 p { text-align: center; } 
 }
@media(max-width:400px){
 #brandskill .sec3 ul { gap:30px 20px; } 
 }

#brandvalue .page_title { font-size: 1.5em; font-weight:500; text-align: center; margin-bottom:60px; } 
#brandvalue { padding:0 } 
#brandvalue .sec .cinner { height:100% } 
#brandvalue .sec1 { } 
#brandvalue .sec1 .page_title { } 
#brandvalue .sec1 .page_title h2 { } 
#brandvalue .sec1 .content_wrap { display: flex; align-items: center; gap: 50px; position:relative; padding:40px 0 } 
#brandvalue .sec1 .content_wrap:before { content:''; position:absolute; right:0; width:70%; background: #333 url(../img/sub/value_sec01_2.png)no-repeat right bottom; height:100%; z-index: 1; } 
#brandvalue .sec1 .content_wrap .img_wrap { z-index: 2; } 
#brandvalue .sec1 .content_wrap .txt_wrap { display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 2; color:#fff } 
#brandvalue .sec1 .content_wrap .txt_wrap p { } 
#brandvalue .sec1 .content_wrap .txt_wrap p:last-child { font-size: 1.3em; } 
#brandvalue .sec2 { background: #f7f9f3; margin-top: 120px; padding: 100px 0; } 
#brandvalue .sec2 .content_wrap ul li:nth-child(1) { background: url(../img/sub/value_sec02_img01.png)no-repeat center center/cover; } 
#brandvalue .sec2 .content_wrap ul li:nth-child(2) { background: url(../img/sub/value_sec02_img02.png)no-repeat center center/cover } 
#brandvalue .sec2 .content_wrap ul li:nth-child(3) { background: url(../img/sub/value_sec02_img03.png)no-repeat center center/cover } 
#brandvalue .sec2 .content_wrap ul li:nth-child(4) { background: url(../img/sub/value_sec02_img04.png)no-repeat center center/cover } 
#brandvalue .sec2 .content_wrap ul { display:flex; gap:20px; } 
#brandvalue .sec2 .content_wrap ul li { height:460px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; width:auto; flex:1 1 0; transition: flex 300ms ease, filter 300ms ease, transform 300ms ease; overflow:hidden; } 
#brandvalue .sec2 .content_wrap ul li:nth-child(1) { flex:2.2 1 0; } 
#brandvalue .sec2 .content_wrap ul:hover li { flex:1 1 0; filter:brightness(0.92); } 
#brandvalue .sec2 .content_wrap ul:hover li:hover { flex:2.6 1 0; filter:brightness(1); transform:translateY(-2px); } 
#brandvalue .sec2 .cinner > p.color_txt { font-size: 1.6em; margin-top:70px; text-align: center; font-weight: 500; } 
#brandvalue .sec3 { background: url(../img/sub/value_sec03.png)no-repeat center center /cover; height:100vh; color:#fff; padding:0 } 
#brandvalue .sec3 .cinner { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 20px; } 
#brandvalue .sec3 h3 { font-size: 1.5em; } 
#brandvalue .sec3 p { } 
#brandvalue .sec3 p span { } 
#brandvalue .sec4 { background: url(../img/sub/value_sec04.png)no-repeat center center /cover; height:100vh; color:#fff; padding:0 } 
#brandvalue .sec4 .cinner { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } 
#brandvalue .sec4 img { height:40px } 
#brandvalue .sec4 h3 { font-size: 1.5em; margin: 36px 0 20px; } 
#brandvalue .sec4 p { } 




@media (max-width: 1399px) { } 
 @media (max-width: 1199px){
 #brandvalue .sec1 .content_wrap { flex-direction: column; padding:0 } 
 #brandvalue .sec1 .content_wrap:before { width: 100%; top: 38%; height: 420px; } 
 #brandvalue .sec1 .content_wrap .txt_wrap { width:80% } 
 #brandvalue .sec1 .content_wrap .txt_wrap p:first-child span { display:inline } 
 }
 @media (max-width: 1024px) { } 
@media (max-width: 768px){
 #brandvalue .sec1 { padding-top:100px; } 
 #brandvalue .sec2 .content_wrap ul { flex-direction:column; } 
 #brandvalue .sec3,
 #brandvalue .sec4 { height:auto; padding:150px 0 } 
#brandvalue .sec2 .cinner > p.color_txt { font-size: 1.2em; } 
 #brandvalue .sec2 .content_wrap ul { flex-direction:column; } 
 #brandvalue .sec2 .content_wrap ul li,
 #brandvalue .sec2 .content_wrap ul li:nth-child(1) { flex:0 0 auto; width:100%; } 
 #brandvalue .sec2 .content_wrap ul:hover li,
 #brandvalue .sec2 .content_wrap ul:hover li:hover { flex: 0 0 auto !important; filter: none !important; transform: none !important; } 
 #brandvalue .sec2 .content_wrap ul li { height:auto; aspect-ratio: 1/1; transition: none !important; } 
 #brandvalue .sec3,
 #brandvalue .sec4 { height:auto; padding:150px 0 } 
 #brandvalue .sec2 .cinner > p.color_txt { font-size: 1.2em; } 
 }
 @media (max-width: 640px) { } 
 @media (max-width: 400px) { } 


.prod .page_title { font-size: 1.5em; font-weight:500; text-align: center; margin-bottom:60px; } 
.prod { padding:0 } 
.prod .sec { padding:0 } 
.prod .sec .cinner { height:100% } 
.prod .sec1 { background: url(../img/sub/prod01_sec01.jpg)no-repeat center center/cover; height:100vh } 
.prod .sec1 .cinner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; } 
.prod .sec1 .cinner img { height: 40px; } 
.prod .sec1 .cinner p { color: #fff6b4; font-size: 1.3em; text-align: center; } 
.prod .sec1 .cinner p:last-child { color: #fff; } 
.prod .sec2 { padding-top:110px; } 
.prod .sec2 .cinner { } 
.prod .sec2 .cinner .page_title { } 
.prod .sec2 .cinner .page_title h2 { font-weight: bold; margin-bottom: 25px; } 
.prod .sec2 .cinner .page_title p { font-size: .7em; color: #737373; } 
.prod .sec2 .cinner ul { display: flex; align-items: flex-start; justify-content: center; gap: 150px; } 
.prod .sec2 .cinner ul li { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; } 
.prod .sec2 .cinner ul li img { } 
.prod .sec2 .cinner ul li h3 { font-size: 1.15em; } 
.prod .sec2 .cinner ul li span { font-size: .9em; color: #919191; text-align: center; } 
.prod .sec2 .cinner .line_banner_wrap { background: url(../img/sub/prod01_sec03.png)no-repeat center center/cover; width:100%; aspect-ratio: 1500/468; margin-top:100px; } 
.prod .sec2 .cinner .line_banner_wrap .txt_wrap { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; justify-content: flex-end; width: 50%; position: relative; left: 50%; padding-left: 100px; top: 50%; } 
.prod .sec2 .cinner .line_banner_wrap h3 { color: #fff6b4; font-size: 1.7em; } 
.prod .sec2 .cinner .line_banner_wrap p { color: #fff; } 
.prod .sec2 .cinner .line_banner_wrap p span:last-child { font-size: 1.3em; } 
.prod .sec3 { margin:130px 0; } 
.prod .sec3 ul { display: flex; } 
.prod .sec3 ul { display:flex; } 
.prod .sec3 ul li { width: calc(100% / 3); aspect-ratio: 640 / 1060; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; color:#fff; overflow:hidden; position:relative; } 
.prod .sec3 ul li::before { content:""; position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; transform: scale(1); transition: transform .5s; z-index:0; } 
.prod .sec3 ul li > * { position:relative; z-index:1; } 
.prod .sec3 ul li:hover::before { transform: scale(1.2); } 
.prod .sec3 ul li:nth-child(1)::before { background-image:url(../img/sub/prod01_sec04_img01.png); } 
.prod .sec3 ul li:nth-child(2)::before { background-image:url(../img/sub/prod01_sec04_img02.png); } 
.prod .sec3 ul li:nth-child(3)::before { background-image:url(../img/sub/prod01_sec04_img03.png); } 
.prod .sec3 ul li > div { position:relative } 
.prod .sec3 ul li > div:before { content:''; position:absolute; width:44px; height: 3px; background:#fff; left:50%; top:-30px; transform: translateX(-50%); } 
.prod .sec3 ul li > p { font-size: 1.5em;; } 
.prod .sec3 ul li > p span { } 
.prod .sec4 { margin-bottom:130px } 
.prod .sec4 .cinner > div { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 35px; } 
.prod .sec4 .cinner > div > img { width:100%; height:100%; display:block; box-sizing:border-box; } 
.prod .sec4 .cinner > div > img:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; } 
.prod .sec4 .cinner > div > img:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; } 
.prod .sec4 .cinner > div > img:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; } 
.prod .sec4 .cinner > div > img:nth-child(4) { grid-column: 2 / 4; grid-row: 2 / 3; } 
.prod .sec5 { background: url(../img/sub/prod01_sec06.png)no-repeat center center/cover; height:100vh } 
.prod .sec5 .cinner { } 
.prod .sec5 .cinner > div { position:relative; height:100%; text-align: center; display:flex; flex-direction: column; justify-content: center; align-items: center; gap:50px } 
.prod .sec5 .cinner p { color:#fff; font-size: 2em; } 
.prod .sec5 .prod_link_wrap { display: flex; gap:20px } 
.prod .sec5 .prod_link_wrap a { font-size: 1.2em; color: #fff; background: var(--color-main); padding: 10px 40px; border-radius: 10px; box-shadow: 2px 2px 20px rgba(0, 0, 0, .1); } 

.prod_popup { display:none;position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 9999; } 
.prod_popup .mySwiper { width: 70%; height: 90vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow-y: auto; } 
.prod_popup .mySwiper .swiper-wrapper { } 
.prod_popup .mySwiper .swiper-wrapper .swiper-slide { display: flex; justify-content: center; align-items: flex-start; overflow: auto; } 
.prod_popup .mySwiper .swiper-wrapper .swiper-slide img { } 

/* 닫기 버튼 */
.popup_close { position:absolute; top:40px; right:40px; width:40px; height:40px; cursor:pointer;z-index: 1000000; } 
.popup_close:before,
.popup_close:after { content:''; position:absolute; left:0; top:18px; width:40px; height:2px; background:#fff; } 
.popup_close:before { transform:rotate(45deg); } 
.popup_close:after { transform:rotate(-45deg); } 

#prod02 .sec1 { background: url(../img/sub/prod02_sec01.jpg)no-repeat center center/cover; } 
#prod02 .sec2 .cinner .line_banner_wrap { background: url(../img/sub/prod02_sec03.png)no-repeat center center/cover; width:100%; aspect-ratio: 1500/468; margin-top:100px; } 
#prod02 .sec2 .cinner .line_banner_wrap .txt_wrap { transform: translateY(-50%); } 
#prod02 .sec3 ul li:nth-child(1)::before { background-image:url(../img/sub/prod02_sec04_img01.png); } 
#prod02 .sec3 ul li:nth-child(2)::before { background-image:url(../img/sub/prod02_sec04_img02.png); } 
#prod02 .sec3 ul li:nth-child(3)::before { background-image:url(../img/sub/prod02_sec04_img03.png); } 
#prod02 .sec5 { background: url(../img/sub/prod02_sec06.png)no-repeat center center/cover; } 


#prod03 .sec1 { background: url(../img/sub/prod03_sec01.png)no-repeat center center/cover; } 
#prod03 .sec2 .cinner .line_banner_wrap { background: url(../img/sub/prod03_sec03.png)no-repeat center center/cover; width:100%; aspect-ratio: 1500/468; margin-top:100px; } 
#prod03 .sec3 ul li:nth-child(1)::before { background-image:url(../img/sub/prod03_sec04_img01.png); } 
#prod03 .sec3 ul li:nth-child(2)::before { background-image:url(../img/sub/prod03_sec04_img02.png); } 
#prod03 .sec3 ul li:nth-child(3)::before { background-image:url(../img/sub/prod03_sec04_img03.png); } 
#prod03 .sec5 { background: url(../img/sub/prod03_sec06.png)no-repeat center center/cover; } 


#prod04 .sec1 { background: url(../img/sub/prod04_sec01.jpg)no-repeat center center/cover; } 
#prod04 .sec2 .cinner .line_banner_wrap { background: url(../img/sub/prod04_sec03.png)no-repeat center center/cover; width:100%; aspect-ratio: 1500/468; margin-top:100px; } 
#prod04 .sec3 ul li:nth-child(1)::before { background-image:url(../img/sub/prod04_sec04_img01.png); } 
#prod04 .sec3 ul li:nth-child(2)::before { background-image:url(../img/sub/prod04_sec04_img02.png); } 
#prod04 .sec3 ul li:nth-child(3)::before { background-image:url(../img/sub/prod04_sec04_img03.png); } 
#prod04 .sec5 { background: url(../img/sub/prod04_sec06.png)no-repeat center center/cover; } 

@media (max-width:1199px){
 .prod .sec2 .cinner .line_banner_wrap .txt_wrap { transform: translateY(-50%) } 
 .prod .sec3 ul li > p { font-size: 1.2em; } 
 #prod02 .sec2 .cinner .line_banner_wrap .txt_wrap { padding-left:30px; font-size: .9em; } 
 #prod03 .sec2 .cinner ul { gap:0; justify-content: space-between; } 
 #prod03 .sec2 .cinner ul li { width:22% } 
 #prod04 .sec2 .cinner ul { gap:0; justify-content: space-between; } 
 #prod04 .sec2 .cinner ul li { width:22% } 
 
 }

@media (max-width:1024px) { } 

@media (max-width:768px){
 .prod .sec1 .cinner img { height:30px } 
 .prod .sec1 .cinner p { font-size: 1.2em; } 
 .prod .sec2 .cinner ul { gap:0; justify-content: space-between; } 
 .prod .sec2 .cinner ul li { width:30% } 
 #prod01 .sec2 .cinner .line_banner_wrap { background: url(../img/sub/mo_prod01_sec03.png) no-repeat center center / cover; padding-top:300px } 
 #prod02 .sec2 .cinner .line_banner_wrap { background: url(../img/sub/mo_prod02_sec03.png) no-repeat center center / cover; padding-top:300px } 
 #prod03 .sec2 .cinner .line_banner_wrap { background: url(../img/sub/mo_prod03_sec03.png) no-repeat center center / cover; padding-top:300px } 
 #prod04 .sec2 .cinner .line_banner_wrap { background: url(../img/sub/mo_prod04_sec03.png) no-repeat center center / cover; padding-top:300px } 

  .prod .sec2 .cinner .line_banner_wrap .txt_wrap { width: 100%; left: 0; top: unset; background: #bab3aa; padding: 50px 30px; bottom: 0; transform: none; display: flex; } 
 .prod .sec4 .cinner > div { grid-template-columns:1fr; } 
 .prod .sec4 .cinner > div > img:nth-child(1),
 .prod .sec4 .cinner > div > img:nth-child(2),
 .prod .sec4 .cinner > div > img:nth-child(3),
 .prod .sec4 .cinner > div > img:nth-child(4) { grid-column:auto; grid-row:auto; aspect-ratio:auto; } 
 .prod .sec5 { height: auto; padding:150px 0; } 
 .prod .sec5 .cinner p { font-size: 1.5em; } 
 #prod02 .sec2 .cinner .line_banner_wrap .txt_wrap { transform: none; } 
 .prod .sec5 .cinner > div { gap:20px } 
 .prod .sec5 .prod_link_wrap { gap:10px } 
.prod .sec5 .prod_link_wrap a { font-size: 1em; } 
.prod_popup .mySwiper {width:80%}
 }

@media (max-width:500px){
 .prod .sec1 .cinner p:last-child span { display:inline } 
 .prod .sec2 .cinner ul { flex-direction: column; align-items: center; gap: 30px; } 
 .prod .sec2 .cinner ul li { width:100% } 
 .prod .sec3 ul { flex-direction: column; } 
 .prod .sec3 ul li { width:100%; height: auto; aspect-ratio: auto; padding:150px 0; } 
 #prod03 .sec2 .cinner ul { flex-direction: column; align-items: center; gap: 30px; } 
 #prod03 .sec2 .cinner ul li { width:100% } 
  #prod04 .sec2 .cinner ul { flex-direction: column; align-items: center; gap: 30px; } 
 #prod04 .sec2 .cinner ul li { width:100% } 
 .prod_popup .mySwiper {width:90%}
 }

/* 문의 상담 */
#inq { padding:0 } 
#inq .sec { padding-top:150px } 
#inq .sec3 { padding-bottom:150px; } 
#inq .sec3 .content_wrap { display:flex; gap:20px } 
#inq .sec3 .content_wrap .img_wrap { position:relative; width:50% } 
#inq .sec3 .content_wrap .img_wrap img { } 
#inq .sec3 .content_wrap .img_wrap .img_txt { position: absolute; color: #fff; top: 0; padding: 45px 60px; } 
#inq .sec3 .content_wrap .img_wrap .img_txt span { font-size: 1.5em; margin-bottom: 20px; display: block; } 
#inq .sec3 .content_wrap .img_wrap .img_txt h4 { font-size: 2.5em } 
#inq .sec3 .content_wrap .img_wrap .img_txt p { margin-top: 10px; } 
#inq .sec3 .content_wrap .img_wrap .img_txt p span { margin: 0; font-size: 1em; } 
#inq .sec3 .content_wrap .list_wrap { display: flex; flex-wrap: wrap; gap: 11px 14px; width: 48% } 
#inq .sec3 .content_wrap .list_wrap li { width: calc(50% - 7px); position:relative } 
#inq .sec3 .content_wrap .list_wrap li a { display: flex; align-items: center; justify-content: center; } 
#inq .sec3 .content_wrap .list_wrap li a img { width:100% } 
#inq .sec3 .content_wrap .list_wrap li a span { font-size: 1.5em; font-weight: bold; font-family: 'suit'; position: absolute; top: 50%; transform: translateY(-50%); left: 100px; display:flex; } 

@media(max-width:1399px){
 #inq .sec3 .content_wrap .list_wrap li a span { font-size:1.3em } 
 }
@media(max-width:1199px){
 #inq .sec3 .content_wrap .img_wrap .img_txt { padding:20px 40px; } 
 #inq .sec3 .content_wrap .img_wrap .img_txt span { font-size:1.3em; margin-bottom:10px; } 
 #inq .sec3 .content_wrap .list_wrap li a span { font-size: 1.2em; left:80px } 
 }
@media(max-width:768px){
 #inq .sec { padding-top:80px } 
 #inq .sec3 { padding-bottom:80px } 
 #inq .sec3 .content_wrap { flex-direction: column; } 
 #inq .sec3 .content_wrap .img_wrap,
 #inq .sec3 .content_wrap .list_wrap { width:100%; } 
 #inq .sec3 .content_wrap .list_wrap li a span { font-size: 1.5em; left:110px;; } 
 #inq .sec3 .content_wrap .img_wrap .img_txt { padding:45px 60px } 
 #bo_w form .left_box h2 { display:none } 
 }
@media(max-width:500px){
 #inq .sec3 .content_wrap .img_wrap .img_txt { padding:20px 40px; } 
 #inq .sec3 .content_wrap .list_wrap li a span { font-size: 1em; left:60px; } 
 }
@media(max-width:420px){
 #inq .sec3 .content_wrap .list_wrap li a span { left:40px; } 
 }