@charset "utf-8";/* CSS Document */
.box0 { padding:0 4vw } 
.box1 { width:1580px; margin:0 auto; max-width:94% } 
.box2 { width:1820px; margin:0 auto;} 

.PC { display:block;}
.PHONE { display:none;}
.db780 {display: none;}

.gnb li.m_hide { display:none } 
body:not(.pop) { display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); overflow: hidden;} 

.headH{ height: var(--headerT)}
.main_container{ background: var(--siteBG1);}

#quick { position:fixed; right:0; top:40%; transform:translateY(-50%); z-index:999; transition:.3s } 
#quick .link { position:relative; } 
#quick .quick_btn { position:absolute; right:100%; width:3em; height:100%; background:#fff; box-sizing:border-box; display:flex; flex-direction:column } 
#quick .quick_btn .wrapBtn { height:3em; min-height: 3em; background:#111; color:#fff; display:flex; align-items:center; justify-content:center } 
#quick .quick_btn .wrapBtn.ctr .ico { transition:.5s } 
#quick .quick_btn .wrapBtn.ctr .ico:before { content:"\e93e" } 
#quick .quick_btn .wrapBtn.goTop { background: var(--siteC); } 
#quick .quick_btn .txt { flex:1 1 0%; writing-mode: vertical-rl; font-size:.813em; font-weight:800; line-height:1; word-spacing:.25em; white-space:nowrap; overflow:hidden; display:flex; align-items:center; background:#0d359f; color:#fff; box-sizing:border-box; border:1px solid rgba(255,255,255,.1) } 
#quick .quick_btn .txt > i { padding:.5em 0 } 
#quick .link .list > li > a { display:flex; align-items:center; color:#fff; height:3.5em; background:rgba(0,0,0,.5); padding:0 6em 0 1em; position:relative } 
#quick .link .list > li > a { border-top:1px solid rgba(255,255,255,.2) } 
#quick .link .list > li > a:after { content:"\e980"; font-family:xeicon; position:absolute; right:.5em; top:50%; transform:translateY(-50%); } 
#quick .link .list > li > a .t1 { font-weight:500; font-size:.975em } 
#quick .link .list > li > a:hover { background:rgba(0,0,0,.7) } 
#quick.off { transform:translate(100%, -50%) } 
#quick.off .quick_btn .wrapBtn.ctr .ico { transform:rotate(180deg) } 

/*kakao_Btn*/
#kakao_Btn{ position:fixed; z-index:999; top:85%; right:4vw; transform:translateY(-50%);}
#kakao_Btn .kakao{ display: flex; align-items: center; gap: .45em; height: 4rem; width: 17rem; border-radius: 10em; text-align: center; background: #FAE100; justify-content: center;}
#kakao_Btn .kakao > .tt{ font-size: 1.315em; font-weight: 700; color: #222;}
#kakao_Btn .kakao > .xi{ font-size: 2.25em; transition: .3s;}

#kakao_Btn .kakao:hover > .xi{ transform: translateY(-.25em);}

.HbtnList{ display: flex; gap: .35em;}
.B_btn{ position: relative; height: 3em; justify-content: center; display: flex; gap: .5em; align-items: center; background: #0d202a; padding: .65em 1em; box-sizing: border-box; color: #fff; border-radius: .6em; font-size: .85em; transition: .3s}
.B_btn.snw{ padding-left: 2.5em;}
.B_btn.snw .icon{ position: absolute; left: 10px; width: 1.5em; top: 52%; transform: translateY(-50%);}
.B_btn:hover{ transform: translateY(-.25em); box-shadow: 3px 6px 12px rgba(0,0,0, .1);}

.B_btn.s1 > .icon{ font-size: 1.65em;}
.B_btn.w1{ width: 5em; height: 5em}

#header{ position: absolute; top: 0; width: 100%; padding: 0 3vw; box-sizing: border-box; z-index: 9;}
#header .top_wrap{ border-bottom: 1px solid rgba(255,255,255, .25)}
#header .top_wrap .logo{}
#header .top_wrap .logo > .in{}
#header .top_wrap .logo > .in > img{ width: 17em; }

#footer { z-index: 1; color: #fff; background: #111; } 

#footer .f_info { padding: 4em 3em 5em } 
#footer .logo img { height:3em;} 
#footer .cname { margin-bottom: .5em; color: rgba(255,255,255, .65); font-size: .938em; } 
#footer .infoW { margin-bottom:.25em; display:flex; font-size:1em } 
#footer .infoW > dt { width:3em; font-weight:500; opacity:.8 } 
#footer .infoW > dd { flex:1 1 0%; min-width:0 } 
#footer .info > li { float:left; margin-right:2em; margin-bottom:.3em; opacity:.8; font-weight:300; position:relative } 
#footer .info > li:before { content:""; position:absolute; right:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2 } 
#footer .info > li:last-child:before { display:none } 
#footer .info > li.point { font-weight:600 } 
#footer .info > li.br { clear:left } 

#footer .copyright { font-size:.813em; opacity:.6; text-transform:uppercase; margin-top:1em } 
#footer .cs_wrap { display:flex; gap:0 4em } 
#footer .cs_wrap .wrap_in { position:relative } 
#footer .cs_wrap .wrap_in:not(:first-child):after { content:""; position:absolute; left:-2em; top:0; width:1px; height:100%; background:#fff; opacity:.2 } 
#footer .cs_wrap .t1 { opacity:.7; font-weight:500; margin-bottom:.5em } 
#footer .cs_wrap .t2 { font-weight:700; font-size:1.25em } 

#footer .info_wrap .family { position: relative; } 
#footer .info_wrap .family .btn { gap:0 5.5em; height:3.5em; padding:0 1.5em; border-radius:.25em; background: #444; } 
#footer .info_wrap .family .btn .tt { font-size:.813em; } 
#footer .info_wrap .family .btn .xi { font-size:1.125em; } 
#footer .info_wrap .family .list { display:none; position:absolute; left:0; bottom: calc(100% + 2px); width:100%; max-height: 16em; margin-bottom:-1px; padding:1em 1em; background: #f8f8f8; border-bottom:1px solid rgba(255,255,255,.2); border-radius: .25em; box-sizing:border-box; border: 1px solid #ddd; } 
#footer .info_wrap .family .list > li > a { display:block; padding:.5em 0; font-size:.938em; color:#777; } 
#footer .info_wrap .family .list > li > a:hover { text-decoration:underline; } 
#footer .info_wrap .family.on .in { opacity:1; } 
#footer .info_wrap .family.on .in .arrow { transform:rotate(180deg); } 
#footer .info_wrap .family.on .list { display:block } 

.sns_st { display:flex; gap:.5em } 
.sns_st > li > a { display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; color: #fff; border-radius:50%; background: #333; transition:.3s } 
/*
.sns_st > li > a.ka { color: var(--snsKa); } 
.sns_st > li > a.yu { color: var(--snsYt); } 
.sns_st > li > a.fb { color: var(--snsFb); } 
.sns_st > li > a.in { color: var(--snsIn); } 
.sns_st > li > a.nv { color: var(--snsNv); } 
*/

/*quick*/
#quick { position:fixed; z-index:999; top:45%; right: 0; transform:translateY(-50%); transition: .35s; } 
#quick .quick_wrap .con { padding-bottom: .65em; margin-bottom: .65em; border-bottom: 1px solid #e8e8e8; } 
#quick .quick_wrap .con:last-of-type { border-bottom: none; } 
#quick .quick_wrap { position:relative; width: 200px; background: #fff; box-shadow:0 0em 16px 0 rgba(0,0,0, .1); padding: 20px; box-sizing: border-box; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } 
#quick .quick_wrap .quick_tit { font-size: 1em; line-height: 1; font-weight: 700; color: #111; margin-bottom: 1em; } 

#quick .quick_wrap .btn { align-items: center; justify-content: center; gap: .5em; padding: .415em 1em; text-align: center; background: #f9f9f9; border-radius: 5px; margin-bottom: .5em; } 
#quick .quick_wrap .btn:last-of-type { margin-bottom: 0em; } 
#quick .quick_wrap .btn > span { font-size: .85em; font-weight: 600; } 

#quick .quick_wrap .btn.kakao { background: var(--snsKa); } 
#quick .quick_wrap .btn.call { background: var(--siteBG1); color: var(--siteC); } 
#quick .quick_wrap .btn.inquiry { background: var(--siteC); color: #fff; } 

#quick .quick_wrap > li .in { padding:.75em .5em; box-sizing:border-box; } 

#quick .quick_wrap .quick_banner { position:relative; background: var(--siteBG2); text-align: center; padding: 15px; box-sizing: border-box; overflow: hidden; } 
#quick .quick_wrap .quick_banner > .txt { font-size: .75em; color: #666; margin-bottom: .5em; line-height: 1.4; } 
#quick .quick_wrap .quick_banner > .num { font-size: 1.45em; font-weight: 800; color: var(--siteC); } 
#quick .quick_wrap .quick_banner > .img_banner { position:relative; top: 20px; text-align: center; } 
#quick .quick_wrap .quick_banner > .img_banner > img { width: 100%; height: 100%; object-fit: contain; } 

#quick .hide_btn { display: inline-block; position: absolute; left: -1.5em; top: 50%; transform: translateY(-50%); width: 2.5em; height: 3em; background: #fff; border: 1px solid #eee; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,.1); z-index: -1; border-radius: 10px; } 
#quick .hide_btn:before { content: '\e93f'; font-family: 'xeicon'; position: absolute; color: #333; font-size: 1.35em; top: 50%; transform: translateY(-50%); transition: .35s; } 

#quick.active { right:-200px; } 
#quick.active .hide_btn:before { transform: translateY(-50%) rotate(180deg); } 

/**/
.radius { border-radius:1em; overflow:hidden } 
.shadow { box-shadow:0 0 1em rgba(0,0,0,.2) } 

.main_top { position:relative; } 
.main_top:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.1 } 
.main_top > .wrapIn { display:flex; gap:1.875em; align-items:flex-end; position:relative; padding:1.875em 0 } 
.main_top .main_top_con { flex:1 1 0%; min-width:0 } 

.vod_wrap { position:relative; width: 100%; height: 100%; } 
.vod_wrap .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } 
.vod_wrap .layer { position:absolute; left:0; top:0; width:100%; height:100% } 

/********메인 공통********/
.main_tit { position:relative; margin-bottom:2.5em; gap:.75em 0; } 
.main_tit.mb0{ margin-bottom: 0em;}
.main_tit.mb1{ margin-bottom: 1.5em;}
.main_tit.sideDot { position: absolute; right: 1em; top: 0em; width: 1em; height: 1em; border-radius: 50%; background: var(--siteC3); } 
.main_tit .t1 { font-weight:800; font-size:3.85em; text-transform: uppercase; letter-spacing:-.025em } 
.main_tit .t1.s1 { font-size:3em } 
.main_tit .t1.s2 { font-size:2.75em } 
.main_tit .t1.s3 { font-size:2.5em } 
.main_tit .t2 {  font-size:4.15em; font-weight:600; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase;} 
.main_tit .t3 { font-size: 2.15em; font-weight: 800; } 
.main_tit .t4 { font-size: 1.1em; line-height: 1.4; color: #444; } 
.main_tit .t4.wh { color: rgba(255,255,255, .65); } 
.main_tit .t4.wh2 { color: rgba(255,255,255, .85); } 
.main_tit .tt { font-weight:500; font-size:1.25em; opacity:.8 } 
.main_tit .en { font-size: .915em; font-weight: 700; margin-top: .5em; color: #afafaf; text-transform: uppercase; } 
.main_tit.white { color:#fff; } 
.main_tit > p > .fd { font-weight: 500; } 
.main_tit .line { width: 1px; height: 2em; background: rgba(255,255,255, .8); margin: .75em auto; } 

.main_con { padding: 4em 0; } 
.main_con.p1{ padding: 2em 0 0 0;}

.radius{ border-radius: 1em;}
.tori{ text-transform: capitalize;}

/*flex box*/
.flex_box { } 
.flex_box.s1 { margin: 0 0 -1em -1em; } 
.flex_box.s2 { margin: 0 0 -2em -2em; } 
.flex_box.s3 { } 
.flex_box.s4 { } 
.flex_box.s5 { } 

.flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } 
.flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } 
.flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } 
.flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } 
.flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } 

.flex_box li > a { display: block; } 

/*심플 버튼*/
.txtarrow { display: flex; align-items: center; gap: .5em; } 
.txtarrow.white { color: #fff; } 
.txtarrow.posi1 { position: relative; top: 30px; } 
.txtarrow.pr { position: absolute; right: 0; top: 3em; } 
.txtarrow .tt { font-size: 1em; font-weight: 500; } 
.txtarrow .xi { font-size: 1em; } 

/*버튼*/
.btn_con { display: inline-block; } 
.btn_con.w1{ max-width: 12em;}
.main_more { display:flex; align-items:center; background: #fff; justify-content:center; border: 1px solid var(--siteC); color: var(--siteC); gap:1em; height:3.15em; padding:0 2em; transition: .3s; } 
.main_more .t1 { font-size: 1em; font-weight:600 } 
.main_more .arrow { font-size:1em; transition: all ease-in .3s; } 
.main_more .arrow:before { content:"\e907" } 
.main_more.c2 { background:var(--siteC); color:#fff; } 
.main_more.w { border-color: #fff; color:#fff; } 
.main_more:hover .arrow { transform: translateX(.3em); } 

.main_more.round{ border-radius: 8em;} 
.main_more.w:hover { border-color: var(--siteC); background-color: var(--siteC); } 

.main_more.bgn{ background: transparent;}
.main_more.bgn:hover{ background: var(--siteC);}

/*부연설명 스타일*/
.est_tt { margin-top: 1em; } 
.est_tt.white { color: #fff; } 
.est_tt > li { margin-bottom: .35em; font-size: .85em; font-weight: 600; } 
.est_tt > li:last-of-type { margin-bottom: 0em; } 

/*슬라이드 css*/
.page_mq { overflow:hidden; } 
.page_mq .mqTT { display:flex; flex-shrink:0; white-space:nowrap; } 
.page_mq .mqTT > * { margin:0 .215em; } 

.marqueeAni { animation-name: marqueeAni; animation-duration: 60s; animation-timing-function:linear; animation-iteration-count: infinite } 
@keyframes marqueeAni { 
 0% { transform:translateX(0); } 
100% { transform:translateX(-50%); } 
 }

/****************************/

/*메인 비주얼*/
.visualSlide_wrap{ position: relative; margin-top: 2em;}
.visualSlide{ position: relative;}
.visualSlide .el{ position: relative; height: 93vh; border-radius: 1.5em; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0% 20%);}
.visualSlide .el .bg{ position:absolute; width: calc(100% + 3em); transition: 3s; height: 100%;}
.visualSlide .el .bg:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .2); content: '';} 
.visualSlide .el .bg > img{ width: 100%; height: 100%; object-fit: cover;}

.visualSlideSlogan_wrap{ position: absolute; top: 50%; transform: translateY(-50%); left: 0;width: 100%; z-index: 2;}
.visualSlideSlogan_wrap .slogan{ }
.visualSlideSlogan_wrap .slogan .wrap_in{ color: #fff; text-align: center;}
.visualSlideSlogan_wrap .slogan .wrap_in .sub_tit{ font-size: 1.15em; letter-spacing: 0.03em; color: rgba(255,255,255, .75); font-weight: 500; opacity: 0; transition: 1s;}
.visualSlideSlogan_wrap .slogan .wrap_in .tit{ font-size: 7.515em; margin: .2em 0 .25em 0; font-weight: 800; line-height: 1; letter-spacing: 0.6em; opacity: 0; filter: blur(10px); transition: 2s;}
.visualSlideSlogan_wrap .slogan .wrap_in .txt{ font-size: 1.715em; font-weight: 500; opacity: 0; transition: 1s;}

.visualSlide_wrap .visualSlide .vod_wrap{ position: absolute; top: 0; left: 0; height: 93vh; border-radius: 1.5em; overflow: hidden; width: 100%;}

.visualSlide_wrap .visualSlide_control{ position: absolute; bottom: 1.5em; left: 50%; color: #fff; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; margin-top: 1em; gap: 1em; z-index: 9;}
.visualSlide_wrap .visualSlide_control .paging{ width: auto !important; font-size: 1.15em; font-weight: 600;}

.visualSlide_wrap .visualSlide_control .swiperBtn{ height: auto;}
.visualSlide_wrap .visualSlide_control .swiperBtn:hover{ color: #fff;}
.visualSlide_wrap .visualSlide_control .swiperBtn.prev,
.visualSlide_wrap .visualSlide_control .swiperBtn.next{ font-size: 2.5em; opacity: .715;}
.visualSlide_wrap .visualSlide_control .swiperBtn:hover{ opacity: 1;}
.visualSlide_wrap .visualSlide_control .swiperBtn.next:before{ content: '\e90b';}
.visualSlide_wrap .visualSlide_control .swiperBtn.prev:before{ content: '\e908';}
.visualSlide_wrap .swiperPauseWrap.pause .play{ background: none; color: #fff;}

.visualSlide .el.swiper-slide-active .bg,
.visualSlide .el.swiper-slide-duplicate-active .bg{ width: calc(100%);}

.visualSlideSlogan_wrap .el.swiper-slide-active .slogan .wrap_in .tit{ letter-spacing: 0.3em; filter: blur(0); opacity: 1;}
.visualSlideSlogan_wrap .el.swiper-slide-active .slogan .wrap_in .sub_tit{ opacity: 1; transition-delay: 1.5s;}
.visualSlideSlogan_wrap .el.swiper-slide-active .slogan .wrap_in .txt{ opacity: 1; transition-delay: 1.915s;}

.num_control{ position: relative; z-index: 99;}
.num_control .control { position: relative; display: flex; align-items: center; gap: .75em; } 
.num_control .control .progress-container { display: flex; align-items: center; gap: 1em; } 
.num_control .control .progress-container .progress-bar { position: relative; bottom: 0; width: 120px; height: 2px; background: rgba(0,0,0, .15); } 
.num_control .control .progress-container .progress-bar span { background: var(--siteC); } 
.num_control .control .progress-container .current-slide,
.num_control .control .progress-container .total-slide { font-weight: 600; } 

.visualSlide .num_control .control{ position: absolute; top: 3em; left: 0;}

.visualSlide .visual_control .prev,
.visualSlide .visual_control .next{ background: transparent; font-size: 2.15em;}
.visualSlide .visual_control .swiperBtn{ opacity: .35; color: #111;}
.visualSlide .visual_control .swiperBtn:hover{ opacity: 1;}
.visualSlide .visual_control .prev{ position: absolute; left: 3em; top: 50%; transform: translateY(-50%);}
.visualSlide .visual_control .prev:before{ content: '\e93b';} 
.visualSlide .visual_control .next:before{ content: '\e93e';}
.visualSlide .visual_control .next{ position: absolute; right: 3em; top: 50%; transform: translateY(-50%);}

/*메인 제품*/

/*탭*/
.tab-panel,
.sub-tab-panel {display: none;}

.tab-panel.active,
.sub-tab-panel.active {display: block;}

.sub-tab-header{ display: flex; justify-content: center; gap: .75em;}
.sub-tab-btn{ position: relative; background: none; border: 1px solid #ddd; padding: .65em 2em; border-radius: 3em; font-size: 1.1em; font-weight: 500; color: #666; transition: .3s;}
.sub-tab-btn.active{ background: var(--siteC); color: #fff; font-weight: 600; box-shadow: 3px 6px 12px rgba(0,0,0, .1);}

/**/

.tab-container { } 
.tab-container .tab-header {display: flex;height: 4.515em;border-radius: 100px;background-color: #fff;margin: 0 auto 4.5em; border: 1px solid #eee;} 
.tab-container .tab-header.w1 { width: 1240px; margin: 0 auto;} 
.tab-container .tab-header > .tab-btn {position: relative;cursor: pointer;height: 100%;display: flex;align-items: center;justify-content: center;flex: 1;font-size: 1.15em;font-weight: 700;border: 2px solid transparent;border-radius: 100px;color: #444; background: #fff; transition: .3s; } 
.tab-container .tab-header > .tab-btn.active {background-color: var(--siteC);color: #fff; } 

.tab-container .tab-content .tab_inner{ background: #fff; border-radius: 2.5em; overflow: hidden; padding: 3em 4em; box-sizing: border-box; margin-top: 3em;}

.sub-tab-container{}
.sub-tab-container .tab_imgbanner{ position: relative; margin-bottom: 2.5em;}
.sub-tab-container .tab_imgbanner:before{ }
.sub-tab-container .tab_imgbanner > .img_con{ position: relative; width: 100%; height: 20em; border-radius: 2em; overflow: hidden;} 
.sub-tab-container .tab_imgbanner > .img_con:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .5); content: '';}
.sub-tab-container .tab_imgbanner > .img_con > img{ width: 100%; height: 100%; object-fit: cover;}

.sub-tab-container .tab_imgbanner .banner_txt{ position: absolute; text-align: center; width: 100%; padding: 0 4em; box-sizing: border-box; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff;}
.sub-tab-container .tab_imgbanner .banner_txt .tit{ font-size: 3.15em; font-weight: 800; margin-bottom: .5em;}
.sub-tab-container .tab_imgbanner .banner_txt .txt{ font-size: 1.1em; color: rgba(255,255,255, .85);}

.sub-tab-content .content_inner{}
.sub-tab-content .content_inner .content_box{ padding-bottom: 4em;}
.sub-tab-content .content_inner .content_box:last-of-type{ padding-bottom: 0em;}
.sub-tab-content .content_inner .content_box .content_main{ display: flex; align-items: center; gap: 6em; margin-top: 3em;}
.sub-tab-content .content_inner .content_box .content_main .pro_img{ width: 45%; max-height: 30em; height: 30em;}
.sub-tab-content .content_inner .content_box .content_main .pro_img > img{ width: 100%; height: 100%; object-fit: contain;}
.sub-tab-content .content_inner .content_box .content_main .pro_info{ width: 55%;}
.sub-tab-content .content_inner .content_box .content_main .pro_info.w100 {width: 100%;}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top{}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top .brand{ font-size: 2.15em; letter-spacing: -0.03em; font-weight: 700;}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top .pro_name{ font-size: 4.15em; line-height: 1; font-weight: 800; letter-spacing: -0.03em; margin: .25em 0 .3em 0;}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top .sub_txt{ font-size: 1.515em; color: rgba(0,0,0, .5);}

.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_txtcon{ margin-top: 2em;}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_txtcon > .tt{ font-size: 1.15em; line-height: 1.4; color: #444; font-weight: 400; margin-bottom: 1.5em;}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_txtcon > .tt:last-of-type{ margin-bottom: 0em;}

.sub-tab-content .content_inner .content_box .div-container{ margin-bottom: 4em;}
.sub-tab-content .content_inner .content_box .div-container:last-of-type{ margin-bottom: 0em;}

/*소닉월 소개*/
.sonicwall_wrap{ display: flex; gap: 2em;}
.sonicwall_wrap .clip_Rcontainer,
.sonicwall_wrap .Bgcon{ width: 50%;}

.sonicwall_wrap .Bgcon .tWrap{ position: absolute; top: 45%; left: 5em;}
.sonicwall_wrap .Bgcon .pro_btn{ position: absolute; top: 50%; transform: translateY(-50%); right: 0;}

.sonicwall_wrap .Bgcon{ position: relative;}
.sonicwall_wrap .Bgcon .img_con{ position: absolute; bottom: 1em; right: -5em; width: 45em;}
.sonicwall_wrap .Bgcon .img_con > img{ width: 100%; height: 100%; object-fit: contain;}
.sonicwall_wrap .Bgcon .behind_img{ position: absolute; top: -10em; width: 100%; left: 50%; transform: translateX(-50%); height: 100%;}
.sonicwall_wrap .Bgcon .behind_img:before{}
.sonicwall_wrap .Bgcon .behind_img > img{ width: 100%; height: 100%; object-fit: contain;}

.sonicwall_wrap .clip_Rcontainer .txt_container{ width: 55%; padding: 3em 2.5em; box-sizing: border-box;}
.sonicwall_wrap .clip_Rcontainer .txt_container .sub_tit{ font-size: 1.715em; font-weight: 400; margin-bottom: 1.25em; line-height: 1.2; text-transform: uppercase;}
.sonicwall_wrap .clip_Rcontainer .txt_container .mid_tit{ font-size: 1.15em; font-weight: 500; margin-bottom: .75em; }
.sonicwall_wrap .clip_Rcontainer .txt_container .txt_wrap{ }
.sonicwall_wrap .clip_Rcontainer .txt_container .txt_wrap .tt{ font-size: .95em; color: rgba(0,0,0, .75); line-height: 1.4; margin-bottom: 1em;}
.sonicwall_wrap .clip_Rcontainer .txt_container .txt_wrap .tt:last-of-type{ margin-bottom: 0em;}

.sonicwall_wrap .clip_Rcontainer .txt_container .sonic_vod{ position: relative; width: 100%; border-radius: .5em; overflow: hidden; height: 15.5em; margin-top: 2.5em;}

.sonicwall_wrap .clip_Rcontainer .img_container{ position:relative; width: 45%; height: 100%;}
.sonicwall_wrap .clip_Rcontainer .img_container:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0.25) 100%); content: ''; z-index: 1;}
.sonicwall_wrap .clip_Rcontainer .img_container > img{ width: 100%; height: 100%; object-fit: cover;}

.clip_Rcontainer{ height: 50em; background: #fff; box-sizing: border-box; overflow: hidden; clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 5% 100%, 0 100%, 0% 20%);}

/*메인 랩스*/

.main_labs{ }
.main_labs .labs_wrap{ display: flex;}
.main_labs .labs_wrap .imgBg,
.main_labs .labs_wrap .labs_info{ width: 50%;}

.main_labs .labs_wrap .imgBg{ clip-path: polygon(10% 0, 100% 0, 100% 10%, 100% 100%, 90% 100%, 10% 100%, 0 90%, 0 10%);}
.main_labs .labs_wrap .imgBg > img{ width: 100%; height: 100%; object-fit: cover;}
.main_labs .labs_wrap .labs_info{ padding: 3em 4em; /*padding: 0 3vw;*/ box-sizing: border-box;}

.network_info{}
.network_info > .tit{ font-size: 1.415em; font-weight: 700; }
.network_info .check_list{ padding: 1em 2em; margin-top: 1.5em; box-sizing: border-box; background: #fff;}
.network_info .check_list > li{ padding: .5em 0; border-bottom: 1px solid #ddd;}
.network_info .check_list > li:last-of-type{ border-bottom: none;}
.network_info .check_list > li > .con{ display: flex; gap: .5em; align-items: center;}
.network_info .check_list > li > .con > .xi{ font-size: 1.85em; color: var(--siteC2);}
.network_info .check_list > li > .con > .tt{ font-size: 1em; font-weight: 500;}
.network_info .check_list > li > .extB{ padding: 1em 1.5em; box-sizing: border-box; background: #f7f7f7; border-radius: .35em; margin-top: 1em;}
.network_info .check_list > li > .extB > .tt{ font-size: .95em; line-height: 1.4;}

/*제품 컨텐츠 내부 디자인*/
.sub-tab-content .content_inner .content_box .char_container{ display: flex; width: 100%;}
.sub-tab-content .content_inner .content_box .char_container .inner_con{ display: flex; width: 100%; border-radius: 1.5em; border: 3px solid var(--siteC2); overflow: hidden;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con{ position:relative; width: 40%; background: var(--siteC2); color: #fff; padding: 3em; box-sizing: border-box;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con .sub_tit{ font-size: 1.215em; font-weight: 500; margin-bottom: .35em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con .en{ font-size: 2.65em; line-height: 1.1; text-transform: uppercase; font-weight: 800;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con > .xi{ position: absolute; bottom: -.2em; right: -.05em; font-size: 20em; opacity: .15;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC{ width: 60%; padding: 3em; box-sizing: border-box;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list{ display: flex; flex-wrap: wrap; margin: 0 0 -1em -1em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list > li{ flex: 1 1 50%; max-width: 50%;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list > li.w100 {max-width: 100%; flex: 1 1 100%;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list > li > .con{ position: relative; display: flex; gap: .5em; margin: 0 0 1em 1em; padding: .5em; box-sizing: border-box; align-items: center; background: #f5f5f5; }
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list > li > .con > .icon{ position: absolute; display: flex; background: var(--siteC2); align-items: center; justify-content: center; top: 0; left: 0; width: 2.5em; height: 100%;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list > li > .con > .icon > .xi{ color: #fff;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list > li > .con > .tt{ font-size: 1.05em; padding-left: 2.5em; font-weight: 500;}

.sub-tab-content .content_inner .content_box .content_tit{ margin-bottom: 1.5em;}
.sub-tab-content .content_inner .content_box .content_tit > .tt{ font-size: 2.15em; font-weight: 800;}
.sub-tab-content .content_inner .content_box .content_tit > .tx{ font-size: 1.15em; font-weight: 400; margin-top: 1em; line-hieght: 1.5;}
.sub-tab-content .content_inner .content_box > p{ text-align: center;}

/*성능 비교 테이블*/
.table_wrap{}
.table_wrap .table_info{ font-size: .9em; color: var(--siteC); font-weight: 600; margin-top: .75em;}
.board_st2{ border-top: 1px solid #111;}
.board_st2 th,
.board_st2 td { text-align: center; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; background: #fff;} 
.board_st2 .tt.s1{ font-size: 1.05em; font-weight: 700;}
.board_st2 td:last-of-type,
.board_st2 th:last-of-type { border-right: none; } 
.board_st2 th { color: #111; background: #f9f9f9; padding: .35em .5em;  font-weight: 700; font-size: 1.1em; height: 4em;} 
.board_st2 td { color: #333; font-weight: 500; padding: 1em 2em; text-align: left; box-sizing: border-box;} 
.board_st2 td.ac{ text-align: center;}
.board_st2 th.br,
.board_st2 td.br{ border-right: 1px solid #e5e5e5;}
.board_st2~div.no_con { border-top: none; } 
.board_st2 td.Bgray{ background: var(--siteBG1);}
.board_st2 td.Bgray2{ background: var(--siteC3); font-weight: 700;}
.board_st2 td .tit{ font-size: 1.15em; font-weight:600;} 

/*메인 컨텍*/
.main_contact .contact_wrap{ position: relative; width: 100%; height: 25em; clip-path: polygon(4% 0, 95% 0, 100% 19%, 100% 100%, 96% 100%, 4% 100%, 0 100%, 0 19%); overflow: hidden;}
.main_contact .contact_wrap:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .5); content: '';}
.main_contact .contact_wrap .textW{ position: absolute; width: 100%; padding: 0 10vw; box-sizing: border-box; text-align: left; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 2;}
.main_contact .contact_wrap .textW > .tit{ font-size: 2.85em; font-weight: 800; line-height: 1.3;}